
//设置当前选择的流程图
//建立连接线 -呼起 输出参数名 和 输入参数名
//创建组件
//绘制当前流程的界面
///---------------绘制连接线的函数-------------------//

window.a_1_0_4_1_1_line_dct={};
window.a_1_0_4_1_1_line_add=function(obj){
  if(window.a_1_0_4_1_1_line_dct[obj.key]){return}
let father_dom=obj.father_dom||obj._this.$refs[obj.father_ref];
//新建一个dom
let new_dom=document.createElement('a_1_0_4_1_1_line');
//设置dom属性 ref值为ref_obj
new_dom.setAttribute('ref','ref_obj');
//设置vue
let vue_dct={'el':new_dom,data:{true:true,false:false,null:null}};
//设置vue传入参数
new_dom.setAttribute(':deepcopy_data',"deepcopy_data");vue_dct.data.deepcopy_data={key:obj.key,father_data:obj.father_data,xy:JSON.stringify(obj.xy)};
//插入dom
father_dom.appendChild(new_dom);  
//渲染vue组件
let new_vue=new Vue(vue_dct);
//获取到刚才渲染的vue对象
let new_vue2=new_vue.$refs.ref_obj;
// new_vue2.data=
//加入快速访问中
if(obj.key){window.a_1_0_4_1_1_line_dct[obj.key]={'dom':new_dom,"vue":new_vue2,'father_dom':father_dom}}

}

window.a_1_0_4_1_1_line_del=function(key){
window.a_1_0_4_1_1_line_dct[key].father_dom.removeChild(window.a_1_0_4_1_1_line_dct[key].vue.$el);
delete window.a_1_0_4_1_1_line_dct[key];
}
window.a_1_0_4_1_1_line_clear=function(){
  window.a_1_0_4_1_1_line_dct={};
}
Vue.component2('a_1_0_4_1_1_line', {  
    template: `
       
   <div :refresh="refresh"
        @mousedown="mouse_down2"
        @mouseup="mouse_up2"
        :class="{
        'a_1_0_4_1_1_line_hover':data.true,
        'a_1_0_4_1_1_click_line':data.line_flag,
        'a_1_0_4_1_1_line_color':!data.line_flag
        }"
   >

        <svg v-if='data.line1_flag' :style="data.line1"
            class="a_1_0_4_1_1_b2" stroke-width="6">
                <path :d="data.line1_d" 
                    stroke="#0096f2"fill="#0096f2" stroke-width="6">
                </path>
        </svg>
        
        <svg v-if='data.line2_flag':style="data.line2"
            class="a_1_0_4_1_1_b2" stroke-width="6">
                <path :d="data.line2_d" 
                    stroke="#0096f2"fill="#0096f2" stroke-width="6">
                </path>
        </svg>
        
        <svg v-if='data.line3_flag' :style="data.line3"  
            class="a_1_0_4_1_1_b2" stroke-width="6">
                <path :d="data.line3_d" 
                    stroke="#0096f2"fill="#0096f2" stroke-width="6">
                </path>
        </svg>
        
        <svg v-if='data.line4_flag' :style="data.line4"
            class="a_1_0_4_1_1_b2" stroke-width="6">
                <path :d="data.line4_d" 
                    stroke="#0096f2"fill="#0096f2" stroke-width="6">
                </path>
        </svg>
        <svg v-if='data.line5_flag' :style="data.line5"
            class="a_1_0_4_1_1_b2" stroke-width="6">
                <path :d="data.line5_d" 
                    stroke="#0096f2"fill="#0096f2" stroke-width="6">
                </path>
        </svg>
    </div>
`,
data(){
    return{
        show_flag:true,
        refresh:'1',
        lefttop:'color:red',
        data:{
          line_flag:false,
          true:true,
            xy:'',
            line1_flag:true,
            line2_flag:false,
            line3_flag:false,
            line4_flag:false,
            line5_flag:false,
            line1:'',
            line2:'',
            line3:'',
            line4:'',
            line5:'',
            line1_d:'',
            line2_d:'',
            line3_d:'',
            line4_d:'',
            line5_d:'',
        }
    }
},
watch:{
    'data.xy':function(e){
        e=JSON.parse(e);
        this.set_line2(e);
    },
},
methods:{
  select_line:function(){
this.data.father_data.选择连线(this.data.key);
  },
  
  mouse_up2:function(event){
    //右击弹窗
    if ( this.button_2_flag){
      if(this.button_2.x==event.clientX && this.button_2.y==event.clientY){

        this.click(event);
      }
    }
    else if(this.button_1_flag){
      if(this.button_1.x==event.clientX && this.button_1.y==event.clientY){
        this.select_line();//选择连线
      }
    }
},
  mouse_down2:function(event){
    if (event.button === 2) {
      // 如果是右键，阻止进一步处理
      this.button_2={'x':event.clientX,'y':event.clientY}
      this.button_2_flag=true;
      this.button_1_flag=false;
      return;
  }
  this.button_2_flag=false;
  this.button_1_flag=true;
  this.button_1={'x':event.clientX,'y':event.clientY}
  this.button_2=null;
},
    set_line:function(dct){
      let x_offset=Math.abs(dct.x1-dct.x2);
      //如果end在start正下方
      if (x_offset<5 && dct.y2>dct.y1){return 0}
      //如果end在start左下方
      else if(dct.x1>=dct.x2 && dct.y2>dct.y1){return 1}
      //如果end在start右下方
      else if(dct.x1<=dct.x2 && dct.y2>dct.y1){return 2}
      //如果end在start上方
      else if(x_offset<5 && dct.y2<=dct.y1){return 3}
      //如果end在start左上方
      else if(dct.x1>=dct.x2 && dct.y2<=dct.y1){return 4}
      //如果end在start右上方
      else if(dct.x1<=dct.x2&& dct.y2<=dct.y1){return 5}
      else if((dct.x1==dct.x2) &&(dct.y1==dct.y2)){return 0}
    },
    
    set_line2:function(dct){
        let x1=dct.x1,y1=dct.y1,x2=dct.x2,y2=dct.y2;
        let k=this.set_line(dct);
        //如果end在start正下方
        if       (k==0){
            this.data.line1=`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${y2-y1+5}px;width:${3}px;`;
            this.data.line1_d="M 0 0 L 0 "+(y2-y1)+" ";
            this.data.line2_flag=false;
            this.data.line3_flag=false;
            this.data.line4_flag=false;
            this.data.line5_flag=false;
            this.data.refresh();
        //如果end在start左下方
        }else if(k==1){
            this.data.line1=`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${(y2-y1)/2+5}px;width:${3}px;`;
            // this.data.line2=`left: ${x2+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${3}px;width:${x1-x2+33}px;cursor:s-resize;`;
            this.data.line2=`left: ${x2+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${3}px;width:${x1-x2+33}px;`;
            this.data.line3=`left: ${x2+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${(y2-y1)/2+5}px;width:${3}px;`;
            this.data.line1_d="M 0 0 L 0 "+((y2-y1)/2+2)+" ";
            this.data.line2_d=`M 0 0 L ${x1-x2+3} 0`;
            this.data.line3_d="M 0 0 L 0 "+((y2-y1)/2+7)+" ";
            this.data.line2_flag=true;
            this.data.line3_flag=true;
            this.data.line4_flag=false;
            this.data.line5_flag=false;
            this.data.refresh();
        //如果end在start右下方
        }else if(k==2){
            this.data.line1=`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${(y2-y1)/2+5}px;width:${3}px;`;
            // this.data.line2=`left: ${x1+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${3}px;width:${x2-x1+5}px;cursor:s-resize;`;
            this.data.line2=`left: ${x1+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${3}px;width:${x2-x1+5}px;`;
            this.data.line3=`left: ${x2+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${(y2-y1)/2+5}px;width:${3}px;`;
            this.data.line1_d="M 0 0 L 0 "+((y2-y1)/2+2)+" ";
            this.data.line2_d=`M 0 0 L ${x2-x1+3} 0`;
            this.data.line3_d="M 0 0 L 0 "+((y2-y1)/2+7)+" ";
            this.data.line2_flag=true;
            this.data.line3_flag=true;
            this.data.line4_flag=false;
            this.data.line5_flag=false;
            this.data.refresh();
        //如果end在start上方
        }else if(k==3){
            this.data.line1=`left: ${x1+4.5}px;top:${y2-35}px;height: ${(y1-y2)+10+70}px;width:${3}px;`;
            this.data.line1_d=`M 0 0 L 0 ${y1-y2+70}`;
            this.data.line2_flag=false;
            this.data.line3_flag=false;
            this.data.line4_flag=false;
            this.data.line5_flag=false;
            this.data.refresh();
        //如果end在start左上方
        }else if(k==4){
            this.data.line1=`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${37}px;width:${3}px;`;
            this.data.line2=`left: ${x1-(x1-x2)/2+4.5}px;top:${y1+35}px;height: ${3}px;width:${(x1-x2)/2+7}px;`;
            // this.data.line3=`left: ${x1-(x1-x2)/2+4.5}px;top:${y2-35}px;height: ${70+y1-y2}px;width:${10}px;cursor:w-resize;`;
            this.data.line3=`left: ${x1-(x1-x2)/2+4.5}px;top:${y2-35}px;height: ${70+y1-y2}px;width:${10}px;`;
            this.data.line4=`left: ${x2+4.5}px;top:${y2-35}px;height: ${3}px;width:${(x1-x2)/2+7}px;`;
            this.data.line5=`left: ${x2+4.5}px;top:${y2-35}px;height: ${55}px;width:${3}px;`;
            this.data.line1_d="M 0 0 L 0 32";
            this.data.line2_d=`M 0 0 L ${(x1-x2)/2+3} 0`;
            this.data.line3_d=`M 0 0 L 0 ${y1-y2+77}`;
            this.data.line4_d=`M 0 0 L ${(x1-x2)/2+3} 0`;
            this.data.line5_d="M 0 0 L 0 44";
            this.data.line2_flag=true;
            this.data.line3_flag=true;
            this.data.line4_flag=true;
            this.data.line5_flag=true;
            this.data.refresh();
        //如果end在start右上方
        }else if(k==5){
            this.data.line1=`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${37}px;width:${3}px;`;
            this.data.line2=`left: ${x1+4.5}px;top:${y1+35}px;height: ${3}px;width:${(x2-x1)/2+7}px;`;
            // this.data.line3=`left: ${x1+(x2-x1)/2+4.5}px;top:${y2-35}px;height: ${70+y1-y2}px;width:${10}px;cursor:w-resize;`;
            this.data.line3=`left: ${x1+(x2-x1)/2+4.5}px;top:${y2-35}px;height: ${70+y1-y2}px;width:${10}px;`;
            this.data.line4=`left: ${x1+(x2-x1)/2+4.5}px;top:${y2-35}px;height: ${3}px;width:${(x2-x1)/2+7}px;`;
            this.data.line5=`left: ${x2+4.5}px;top:${y2-35}px;height: ${55}px;width:${3}px;`;
            this.data.line1_d="M 0 0 L 0 32";
            this.data.line2_d=`M 0 0 L ${(x2-x1)/2+3} 0`;
            this.data.line3_d=`M 0 0 L 0 ${y1-y2+77}`;
            this.data.line4_d=`M 0 0 L ${(x2-x1)/2+3} 0`;
            this.data.line5_d="M 0 0 L 0 44";
            this.data.line2_flag=true;
            this.data.line3_flag=true;
            this.data.line4_flag=true;
            this.data.line5_flag=true;
            this.data.refresh();
        }
    },
    click:function(event){
      
    let _this=this;
    a_1_0_4_1_1_show_menu({
      event:event,
      menu_dct:{
        1:{
          text:"删除",
          click:function(event){
            _this.data.father_data.删除连线(_this.data.key);
          }
        }
      }
    })
  }
},

mounted:function(){
_this.data.refresh=function(){_this.refresh='2'?'1':'2'}
_this.data.menu_dct=_this.deepcopy_data.menu_dct;_this.data.refresh();
}

})

//----------------绘制连接线的函数end---------------//
Vue.component2('a_1_0_4_1_1_input_range',{
  template:`
  <div 
      @mouseenter="handleMouseEnter"  
      @mouseleave="handleMouseLeave">


  <input ref="range"class="a_1_0_4_1_1inputrange"type="range" min="1" max="200" step="1" value="100" @input="showValue">


        <div class="a_1_0_4_1_1_sub_menu" :style="hovertext_style">
            <div class="a_1_0_4_1_1_sub_menu_item" ref="text">
               缩放比:100%
            </div>
        </div>


  </div>
  `, 
  data() {
      return {
        refresh:"1",
        show_flag:true,
        hover_flag:false,
        style:{},
        hovertext_style:"top:-100;visibility:hidden;",
        style2:"",
        data:{
            test:false,
            val:100,
            add_show:true,
            callback:null,
            icon_class:"",//图标类
            icon_color:"rgba(231, 231, 231, 0.6)",//图标颜色
            background:"#212121",//背景颜色
            hovercolor:"#ffffff",//高亮颜色
            hovertext:"缩放比:100%",//移动到位后的提示文字
            click:null,//点击触发函数
        }
      };
  },
  watch:{
  },
  methods:{accumulateParentOffsets:function (targetElement) {  
    let currentElement = targetElement;  
    let totalLeft = 0;  
    let totalTop = 0;  
  
    while (currentElement && currentElement.nodeType === Node.ELEMENT_NODE) {  
        const computedStyle = window.getComputedStyle(currentElement);  
          
        if (computedStyle.position === 'relative') {  
            // 注意：offsetLeft 和 offsetTop 给出的是相对于最近的定位祖先的偏移  
            // 在这里，我们假设没有其他的定位祖先（或它们不影响我们的计算）  
            // 因为我们只关心 relative 定位的父元素  
            totalLeft += currentElement.offsetLeft;  
            totalTop += currentElement.offsetTop;  
        }  
  
        currentElement = currentElement.parentElement;  
    }  
  
    return { left: totalLeft, top: totalTop };  
} ,
    showValue(event){
      this.data.val=event.target.value;
      this.$refs.text.innerHTML="缩放比:"+this.data.val+'%';
      try{this.data.callback(this.data.val)}catch{};
    },
    get_rect(){
      let rect=this.$refs.range.getBoundingClientRect();

  // console.log('Top:', rect.top);
  // console.log('Left:', rect.left);
  // console.log('Bottom:', rect.bottom);
  // console.log('Right:', rect.right);
  // console.log('Width:', rect.width);
  // console.log('Height:', rect.height);
  return rect
    },
    handleMouseEnter(){  
        if(this.hover_flag==false){
            this.hover_flag=true; 
            let rect=this.get_rect();
            let oobj=this.accumulateParentOffsets(this.$refs.range);
            this.hovertext_style=`top:${rect.top-oobj.top-40};left:${rect.left-oobj.left}`;
        }
      },  
      handleMouseLeave() {  
        if(this.hover_flag==true){
            this.hover_flag=false; 
            this.hovertext_style="top:-100;visibility:hidden;";
        }
      } ,
  },
  mounted:function(){
} }
);


Vue.component2('a_1_0_4_1_1button',{
  template:`
  <div style="padding:7.5px"
      @mouseenter="handleMouseEnter"  
      @mouseleave="handleMouseLeave">

      <button ref="range" class="a_1_0_4_1_1button" @click="change_val">{{data.hovertext}}</button>

        <div class="a_1_0_4_1_1_sub_menu" :style="hovertext_style">
            <div class="a_1_0_4_1_1_sub_menu_item" ref="text">
              {{data.name}}:{{data.hovertext}}
            </div>
        </div>


  </div>
  `, 
  data() {
      return {
        refresh:"1",
        show_flag:true,
        hover_flag:false,
        style:{},
        hovertext_style:"top:-100;visibility:hidden;",
        style2:"",
        data:{
            test:false,
            val:100,
            add_show:true,
            icon_class:"",//图标类
            icon_color:"rgba(231, 231, 231, 0.6)",//图标颜色
            background:"#212121",//背景颜色
            hovercolor:"#ffffff",//高亮颜色
            name:"宽度:",
            hovertext:"2000px",//移动到位后的提示文字
            click:null,//点击触发函数
        }
      };
  },
  watch:{
  },
  methods:{
    
    change_val:function(){
      let _this=this;
      _this.$prompt('修改'+this.data.name, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        try{_this.showValue(value);}
        catch (err){
            console.log("出错..",err)
        }
        
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '取消输入'
        });       
      });
    },
    
    
    accumulateParentOffsets:function (targetElement) {  
    let currentElement = targetElement;  
    let totalLeft = 0;  
    let totalTop = 0;  
  
    while (currentElement && currentElement.nodeType === Node.ELEMENT_NODE) {  
        const computedStyle = window.getComputedStyle(currentElement);  
          
        if (computedStyle.position === 'relative') {  
            // 注意：offsetLeft 和 offsetTop 给出的是相对于最近的定位祖先的偏移  
            // 在这里，我们假设没有其他的定位祖先（或它们不影响我们的计算）  
            // 因为我们只关心 relative 定位的父元素  
            totalLeft += currentElement.offsetLeft;  
            totalTop += currentElement.offsetTop;  
        }  
  
        currentElement = currentElement.parentElement;  
    }  
  
    return { left: totalLeft, top: totalTop };  
} ,
    showValue(val){
      this.data.val=val;
      this.data.hovertext=val+'px';
      try{this.data.callback(this.data.val)}catch{};
    },
    get_rect(){
      let rect=this.$refs.range.getBoundingClientRect();

  // console.log('Top:', rect.top);
  // console.log('Left:', rect.left);
  // console.log('Bottom:', rect.bottom);
  // console.log('Right:', rect.right);
  // console.log('Width:', rect.width);
  // console.log('Height:', rect.height);
      return rect
    },
    handleMouseEnter(){  
        if(this.hover_flag==false){
            this.hover_flag=true; 
            let rect=this.get_rect();
            let oobj=this.accumulateParentOffsets(this.$refs.range);
            this.hovertext_style=`top:${rect.top-oobj.top-40};left:${rect.left-oobj.left}`;
        }
      },  
      handleMouseLeave() {  
        if(this.hover_flag==true){
            this.hover_flag=false; 
            this.hovertext_style="top:-100;visibility:hidden;";
        }
      } ,
  },
  mounted:function(){
} }
);


Vue.component2('a_1_0_4_1_1button2',{
  template:`
  <div >

      <button ref="range" class="a_1_0_4_1_1button" @click="click_func">{{data.name}}</button>



  </div>
  `, 
  data() {
      return {
        data:{
          click:null,
            name:"运行控制",
        }
      };
  },
  watch:{
  },
  methods:{
    click_func:function(){
      let _this=this;
      try{this.data.click();}catch{}
    }
  },
  mounted:function(){
} }
);


function a_1_0_4_1_1_get_div() { 
	let res=document.getElementById("a_1_0_4_1_1");
    if(!res){
    res = document.createElement('div');  
    res.id = 'a_1_0_4_1_1'; // 为div设置一个唯一的ID  
    
    res.style.visibility = 'hidden'; // 初始设置为隐藏，但不影响尺寸计算  
    res.style.position = 'absolute'; // 设置为绝对定位，避免影响其他元素布局（可选） 
    res.style.display = 'none'; //隐藏 
    document.body.appendChild(res);
    }
      
    return res;  
}  
  
// 通过传参设置div的样式，并输出div的高度和宽度  
function a_1_0_4_1_1_get_wh(obj) {  
    let styles=obj.styles||{};
    let class_=obj.class||'';
    let context=obj.context||'';
    let res=a_1_0_4_1_1_get_div();
    
    // 清除除visibility和position之外的所有样式  
    for (let style in res.style) {  
        if (style !== 'visibility' && style !== 'position' ) { 
            res.style.removeProperty(style);  
        }  
    }  
    res.style.visibility = 'hidden'; // 初始设置为隐藏，但不影响尺寸计算  
    res.style.position = 'absolute'; // 设置为绝对定位，避免影响其他元素布局（可选） 
    // 设置div的样式  
    for (let property in styles) {  
        if (styles.hasOwnProperty(property)) {  
            res.style[property] = styles[property];  
        }  
    }  
    res.className=class_;
    res.textContent=context;
    // 获取div的高度和宽度（包括padding和border，但不包括margin）  
    let height = res.offsetHeight;  
    let width = res.offsetWidth;  
  
    res.style.display = 'none'; //隐藏
    // 输出高度和宽度  
    console.log(`Div的高度: ${height}px`);  
    console.log(`Div的宽度: ${width}px`);  
  
    return { height:height, width:width }; // 返回高度和宽度（可选）  
}  
  
// 使用示例  
// a_1_0_4_1_1_get_wh({
// styles:{
//     backgroundColor: 'lightblue',  
//     border: '1px solid black',  
//     padding: '10px'
// },
// context:'33333',
// class:'ddd'
// });
////----------------------绘制右击菜单---------start------------/////////
window.a_1_0_4_1_1_dom=null;//表示菜单的dom
window.a_1_0_4_1_1_vue=null;//表示菜单的dom
window.a_1_0_4_1_1_show_menu=function(obj){

let x=null;
let y=null;
if(obj.event){
    x=obj.event.clientX;
    y=obj.event.clientY;
}else{
    x=obj.x;
    y=obj.y;
}
let deepcopy_data={"menu_dct":obj.menu_dct,'keys':Object.keys(obj.menu_dct).sort(),x:x,y:y}
//如果菜单不存在则创建一个菜单
if(!a_1_0_4_1_1_dom){
let new_dom=document.createElement('a_1_0_4_1_1_menu');
//设置dom属性 ref值为ref_obj
new_dom.setAttribute('ref','ref_obj');
new_dom.setAttribute(':deepcopy_data','deepcopy_data');
//设置vue
let vue_dct={'el':new_dom,data:{true:true,false:false,null:null,deepcopy_data:deepcopy_data}};
// 将这个 div 添加到 document.documentElement（即 <html> 元素）  
document.documentElement.appendChild(new_dom);
//渲染vue组件
window.a_1_0_4_1_1_vue=new Vue(vue_dct);
window.a_1_0_4_1_1_dom=new_dom;

document.addEventListener('click', function(event) {
  // Check if the clicked element is not doma and not a descendant of doma
  if (!window.a_1_0_4_1_1_vue.$refs.ref_obj.$el.contains(event.target)) {
      window.a_1_0_4_1_1_vue.$refs.ref_obj.show_flag=false;
  }
});
}else{
    window.a_1_0_4_1_1_vue.$refs.ref_obj.data.keys=Object.keys(obj.menu_dct).sort();
    window.a_1_0_4_1_1_vue.$refs.ref_obj.data.menu_dct=obj.menu_dct;
    window.a_1_0_4_1_1_vue.$refs.ref_obj.data.x=x;
    window.a_1_0_4_1_1_vue.$refs.ref_obj.data.y=y;
    window.a_1_0_4_1_1_vue.$refs.ref_obj.data.refresh();
    window.a_1_0_4_1_1_vue.$refs.ref_obj.show_flag=true;

}

}


Vue.component2('a_1_0_4_1_1_menu', {  
    template: `
       
        <div class="a_1_0_4_1_1_sub_menu" :style="lefttop" :key='refresh' v-show='show_flag'>
            <div class="a_1_0_4_1_1_sub_menu_item" ref="text"v-for="(key,indexr) in data.keys" @click="click($event,key)">
                {{data.menu_dct[key].text}}
            </div>
        </div>
`,
data(){
    return{
        show_flag:true,
        refresh:'1',
        lefttop:'color:red',
        data:{
            menu_dct:{
            },
            keys:{},
            x:'33',
            y:'33',
        }
    }
},
watch:{
    
    "data.x":function(e){
        this.lefttop=`left:${this.data.x};top:${this.data.y};`
    },
    "data.y":function(e){
        this.lefttop=`left:${this.data.x};top:${this.data.y};`
    },
},
methods:{
    
    click:function(event,key){
        this.data.menu_dct[key].click(event);
        this.show_flag=false;
    },
},

mounted:function(){
_this.data.refresh=function(){_this.refresh='2'?'1':'2'};
_this.data.keys=_this.deepcopy_data.keys;
_this.data.x=_this.deepcopy_data.x;
_this.data.y=_this.deepcopy_data.y;
_this.data.menu_dct=_this.deepcopy_data.menu_dct;_this.data.refresh();
}

})

// a_1_0_4_1_1_show_menu(
// {
//     menu_dct:{
//         '0':{
//             'text':"删除",
//             'click':function(){console.log("???");
//},
//         },
//         '1':{
//             'text':"查看",
//             'click':function(){console.log("2???");
//},
//         },
//     },
//     x:444,y:444,
// }
// )

// a_1_0_4_1_1_show_menu(
// {
//     menu_dct:{
//         '0':{
//             'text':"3删除",
//             'click':function(){console.log("???");
//},
//         },
//         '1':{
//             'text':"4查看",
//             'click':function(){console.log("2???");
//},
//         },
//     },
//     event:{clientX:333,clientY:555}
// }
// )
////----------------------绘制右击菜单-------end--------------/////////

//-------------------------绘制 组件按钮-------start--------------//
Vue.component2('a_1_0_4_1_1_buttonx', {  
    template: `
        <div  class="a_1_0_4_1_1_class6" :style="lefttop"
        v-if="data.id_"
        @mousedown="mouse_down2"
        @mouseup="mouse_up2"
        :key="refresh"
        >
            <div 
            
        :class="{
        'a_1_0_4_1_1_class1':data.true,
        
        'a_1_0_4_1_1_click_out_button':data.out_flag,
    'a_1_0_4_1_1_click_in_button': data.in_flag,
        }"
            
            >
        
        <span  style="color:#bcbcbc" :key="refresh2">{{data.father.flow_dict[data.id_].name}}</span>



        
        <!-- 入参 上圆 -->
        <svg 
        入参
        class="a_1_0_4_1_1_class2"
        @mousedown="mouse_down__"
        @mouseup="mouse_up1" 
        :style="data.circle_style1"  width="12" height="12">
        <circle cx="6" cy="6" r="4" fill="none" stroke="#FFFFFF" style="" stroke-width="1"></circle></svg>
        
        <!-- 出参 下圆 -->
        <svg 
        出参
        class="a_1_0_4_1_1_class3"
        @mousedown="mouse_down1"
        :style="data.circle_style2" width="12" height="12">
        <circle cx="6" cy="6" r="4" fill="none" stroke="#FFFFFF" style="" stroke-width="1"
        
        ></circle></svg>
        
        <!-- 进程id-->
        <svg 
        进程id
        width="24" height="24"
        
        :class="{
        'a_1_0_4_1_1_class4':data.true,
        
        'a_1_0_4_1_1_success1':data.father.process_dct[data.father.flow_dict[data.id_].process_id],
    'a_1_0_4_1_1_error1': !data.father.process_dct[data.father.flow_dict[data.id_].process_id],
        }"
        
        :style="data.circle_style3">
        <circle cx="12" cy="12" r="8" fill="none" stroke="#FFFFFF" stroke-width="2"></circle>
    
    
        <text x="7" y="17" fill="white" style="font-size: 15px; font-family: Arial;">
{{data.father.flow_dict[data.id_].process_id}}</text> </svg>
    
    <!-- 函数类型  显示tree_type的圈圈0(绿色)表示被动执行的函数(如 def a():return 1) 1(橙色)表示需要触发执行的函数(如接收http请求的函数)-->
    <svg 
    函数类型
    width="24" height="24"
    
    :class="{
        'a_1_0_4_1_1_class5':data.true, 
        'a_1_0_4_1_1_success2': data.father.flow_dict[data.id_].tree_type=='0',
    'a_1_0_4_1_1_error2': data.father.flow_dict[data.id_].tree_type=='1',
    }"
    
    :style="data.circle_style4">
    <circle cx="12" cy="12" r="8" fill="none" stroke="#FFFFFF" stroke-width="2"></circle>
    </svg>
        </div>



        </div>
`,
data(){
    return{
      refresh:'1',
      refresh2:'3',
        lefttop:'',
        data:{
          out_flag:false,
          in_flag:false,
            id_:null,
            father:{},
            true:true,
            process_dct2:{54:"mqtt进程"},
            process_dct:{45:"mqtt进程"},
            process_id:"",
            circle_style1:'',
            circle_style2:'',
            circle_style3:'',
            circle_style4:'',
            circle_style_left:'',
            name:"",
            key:'',
            x:'',
            y:'',
        }
    }
},
watch:{
    "data.x":function(e){
        this.lefttop=`left:${this.data.x};top:${this.data.y};`
    },
    "data.y":function(e){
        this.lefttop=`left:${this.data.x};top:${this.data.y};`
    },
    "data.name":function(e){
        let obj=a_1_0_4_1_1_get_wh({
            'context':this.data.father.flow_dict[this.data.id_].name,
            'class':"a_1_0_4_1_1_class1 ddd"
        });
        let width=obj.width;
        this.data.circle_style1=`left:${width/2-6}px`;
        this.data.circle_style2=`left:${width/2-6}px`;
        this.data.circle_style_left=width/2-6;
    }
},

methods:{
  refresh2_func:function(){
    
    this.refresh2=this.refresh2==='4'?'3':'4'},
  refresh_func:function(){
    
    let obj=a_1_0_4_1_1_get_wh({
      'context':this.data.father.flow_dict[this.data.id_].name,
      'class':"a_1_0_4_1_1_class1 ddd"
  });
  let width=obj.width;
  this.data.circle_style1=`left:${width/2-6}px`;
  this.data.circle_style2=`left:${width/2-6}px`;
  this.data.circle_style_left=width/2-6;
    this.refresh=this.refresh==='2'?'1':'2'},
  return_circle_xy1:function(){
    return {x:this.data.x+this.data.circle_style_left,y:this.data.y-12}
  },
  return_circle_xy2:function(){
    return {x:this.data.x+this.data.circle_style_left,y:this.data.y+24}
  },
  
     mouse_down__:function(event){
      event.stopPropagation();
     },
     mouse_up__:function(event){
      event.stopPropagation();
     },
    mouse_up1:function(event){
      let data=this.data.father_data.全局鼠标操作对象1.get_data({key:"绘制当前连线"})
        try{ if (!data.write_flag){return}}catch{return}
       
      let xy=this.return_circle_xy1();
        console.log("上圆 释放鼠标")
        this.data.father_data.建立连接线({
          key:this.data.key
        });
        event.stopPropagation();
    },
    mouse_down1:function(event){
      let xy=this.return_circle_xy2();
        this.data.father_data.全局鼠标操作对象1.set_data({
          key:"绘制当前连线",
          data:{key:this.data.key,
            x1:xy.x,y1:xy.y,
            write_flag:true
          }
      });
        this.data.father_data.显示当前绘制的连线(event);


        this.data.father_data.全局鼠标操作对象1.set_move({
          key:"绘制当前连线",
          key2:"绘制当前连线move",
          func:this.data.father_data.移动当前绘制的连线,
      });
      this.data.father_data.全局鼠标操作对象1.set_up({
          key:"绘制当前连线",
          key2:"绘制当前连线up",
          func:this.data.father_data.隐藏当前绘制的连线,
      });

        event.stopPropagation();
    },
    mouse_up2:function(event){
      if ( this.button_2_flag){
        if(this.button_2.x==event.clientX && this.button_2.y==event.clientY){
          this.click(event);
        }
      }
      else if(this.button_1_flag){
        if(this.button_1.x==event.clientX && this.button_1.y==event.clientY){
          this.data.father_data.选择组件(this.data.key);
        }
      }
  },
    move_mouse:function(){

    },
    
    mouse_down2:function(event){
      if (event.button === 2) {
        // 如果是右键，阻止进一步处理
        this.button_2={'x':event.clientX,'y':event.clientY}
        this.button_2_flag=true;
        this.button_1_flag=false;
        return;
    }
    this.button_2_flag=false;
    this.button_1_flag=true;
    this.button_1={'x':event.clientX,'y':event.clientY}
    this.button_2=null;
      this.data.father_data.全局鼠标操作对象1.set_move({
        key:"移动后端组件",
        key2:"移动后端组件move",
        func:this.data.father_data.移动后端组件move,
    });
    this.data.father_data.全局鼠标操作对象1.set_up({
        key:"移动后端组件",
        key2:"移动后端组件up",
        func:this.data.father_data.移动后端组件up,
    }); 
    this.data.father_data.全局鼠标操作对象1.set_data({
        key:"移动后端组件",
        data:{key:this.data.key,
          x:this.data.x,y:this.data.y,
          mousex:event.clientX,mousey:event.clientY}
    });
  },
  change_name:function(_this){
    this.$prompt('修改组件名称', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(({ value }) => {
      
      _this.data.father_data.修改组件名称(_this.data.key,value);
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '取消输入'
      });       
    });
  },
  click:function(event){
    let _this=this;
    a_1_0_4_1_1_show_menu({
      event:event,
      menu_dct:{
        
        0:{
          text:"改名",
          click:function(event){
            _this.change_name(_this);
          }
        },
        1:{
          text:"删除",
          click:function(event){
            _this.data.father_data.删除组件(_this.data.key);
          }
        }
      }
    })
  }
},

mounted:function(){

}

})
window.a_1_0_4_1_1_dom_dct={};
window.a_1_0_4_1_1_add=function(obj){
let father_dom=obj.father_dom||obj._this.$refs[obj.father_ref];
let vue_name=obj.vue_name;
//新建一个dom
let new_dom=document.createElement(vue_name);
//设置dom属性 ref值为ref_obj
new_dom.setAttribute('ref','ref_obj');
//设置vue
let vue_dct={'el':new_dom,data:{true:true,false:false,null:null}};
//设置vue传入参数
if(obj.deepcopy_data){new_dom.setAttribute(':deepcopy_data',"deepcopy_data");vue_dct.data.deepcopy_data=obj.deepcopy_data;}
//插入dom
father_dom.appendChild(new_dom);  
//渲染vue组件
let new_vue=new Vue(vue_dct);
//获取到刚才渲染的vue对象
let new_vue2=new_vue.$refs.ref_obj;
//加入快速访问中
if(obj.key){window.a_1_0_4_1_1_dom_dct[obj.key]={'dom':new_dom,"vue":new_vue2,'father_dom':father_dom}}

}
window.a_1_0_4_1_1_refresh_all=function(){
  for(let k in window.a_1_0_4_1_1_dom_dct){
    window.a_1_0_4_1_1_dom_dct[k].vue.refresh_func();
  }
}
window.a_1_0_4_1_1_del=function(key){
window.a_1_0_4_1_1_dom_dct[key].father_dom.removeChild(window.a_1_0_4_1_1_dom_dct[key].vue.$el);
delete window.a_1_0_4_1_1_dom_dct[key];
}
window.a_1_0_4_1_1_clear=function(){
  window.a_1_0_4_1_1_dom_dct={};
}
//-------------------------绘制 组件按钮-------end--------------//
////如果处于组件拖拽进来的状态
//创建连线
//组件被点击
Vue.component2('a_1_0_4_1_1', {  
    template: `
<div class="a_1_0_4_1_1_parent1" v-show="data.show_flag ">

  <!-- 顶部显示窗口 start -->
    <div class="a_1_0_4_1_1_title">
        <div style="padding-left:20px;color:#bcbcbc">后端流程可视化编辑界面
            <div style="display:inline-block;flex:1;">
                <div style="display:flex;
                    justify-content: flex-end;
                    display: flex;">
                </div>
            </div>
        </div>
    </div>
  <!-- 顶部显示窗口 end -->


<!-- 弹窗部分 start -->
    <!-- 右击组件后的弹窗 -->
    <div class="menu-container" v-show="now_select_temp_menu_flag" >  
      <ul class="menu-list"> 
        <li class="menu-item" @click="del_temp">  
          <span class="icon">❌</span>  
          <span class="text">删除</span>  
        </li>  
      </ul>  
    </div>  

      <!-- 右击连线后的弹窗 -->
    <div class="menu-container" v-show="now_select_line_menu_flag">  
      <ul class="menu-list"> 
        <li class="menu-item"@click="del_line">  
          <span class="icon">❌</span>  
          <span class="text">删除</span>  
        </li>  
      </ul>  
    </div>  
<!-- 弹窗部分 end -->
  <!-- 主要操作窗口 start -->
  <div ref="scroll"class="a_1_0_4_1_1_parent a_1_0_4_1_1scrollbar"style="position: relative;
    background: #282828;"
   
    >
    <div :style="data.write_style"
    class="a_1_0_4_1_1_parent3"
    ref="write_dom"
    @mousemove="mousemove_"  
    @mouseup="mouseup_" 
    @mouseleave="mouseleave_" 
    @mouseenter="mouseenter_"
    >
    </div>
    </div>

  <!-- 主要操作窗口 end -->
  
  <!-- 底部设置窗口 start -->
    <div class="a_1_0_4_1_1_shu_page_info">
    <!-- 设置界面缩放比 start -->
    <a_1_0_4_1_1_input_range  :key="data.scale_key"style="padding:7.5px" :deepcopy_data="data.change_scale_info"></a_1_0_4_1_1_input_range>
    <!-- 设置界面缩放比 end -->

    <!-- 设置界面宽度 start -->
    <a_1_0_4_1_1button  :key="data.width_key" style="padding:7.5px":deepcopy_data="data.change_width_info"></a_1_0_4_1_1button>
    <!-- 设置界面宽度 end -->

    <!-- 设置界面高度 start -->
    <a_1_0_4_1_1button  :key="data.height_key"style="padding:7.5px" :deepcopy_data="data.change_height_info"></a_1_0_4_1_1button>
    <!-- 设置界面高度 end -->

        <div style="height:100%;width:100%;display: inline-block; flex: 1 1 0%;">
            <div style="height:100%;display: flex; justify-content: flex-end;">
                <div style="height:100%;">
                    <div class="a_1_0_4_1_1_icon_class" style="display: inline-block;">
                      <a_1_0_4_1_1button2 style="padding:7.5px" :deepcopy_data="{'name':'运行控制','click':run_flow}"></a_1_0_4_1_1button2>
                    </div>
                </div>
                <div :key="flow_type_key">
                    <div class="a_1_0_4_1_1_icon_class" style="display: inline-block;">
                    <div style="padding:7.5px" >
                        <span>{{flow_type}}</span>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  <!-- 底部设置窗口 end -->

    </div>
  `,  
  data:function(){  
  
    return {
      flow_type_key:"ff1",
      flow_type:'未运行',
      now_select_temp_menu_flag:false,
      now_select_line_menu_flag:false,
        data:{
          write_style:"width:2000px;height:2000px;scale:1.0",
          scale:1.0,
          scale_key:"1",
          change_scale_info:{},
          change_width_info:{},
          change_height_info:{},
          width:'2000px',
          width_key:"3",
          height:'2000px',
          height_key:"5",

          key:null,//当前选择的流程
          data:{},
          全局配置对象:null,
          true:true,
          false:false,
          show_flag:false,
          },
        }
    }   , 
    watch:{

    },
  methods: {  
  拖拽进来组件:function(event,info){
    this.data.新增组件(event,info);
  },
  //鼠标按下 触发函数
  mouseup_:function(event,){
    console.log("test mouse up")
    console.log("_this.data.全局鼠标操作对象1 eeee",JSON.parse(JSON.stringify(this.data.全局鼠标操作对象1.up_funcs)))
    if (this.data.全局鼠标操作对象1.up_funcs['拖拽后端组件']){
      this.拖拽进来组件(event,this.data.全局鼠标操作对象1.get_data({"key":'拖拽后端组件'}));
    }
    
    let x=event.clientX;
    let y=event.clientY;
    let relative_leftright=accumulateParentOffsets(this.$refs.write_dom);//累加所有relative 父dom的left和top
    let params={x:x,y:y,relative_leftright:relative_leftright,dom:this.$refs.write_dom};
    try{this.data.move_obj.mouseup(event,params);}catch{}
    
  },
  //鼠标移动 触发函数
  mousemove_:function(event){
    let x=event.clientX;
    let y=event.clientY;
    let relative_leftright=accumulateParentOffsets(this.$refs.write_dom);//累加所有relative 父dom的left和top
    let params={x:x,y:y,relative_leftright:relative_leftright,dom:this.$refs.write_dom};
    try{this.data.move_obj.mousemove(event,params);}catch{}

  },
  //鼠标移入 触发函数
  mouseenter_:function(event,){
    let x=event.clientX;
    let y=event.clientY;
    let relative_leftright=accumulateParentOffsets(this.$refs.write_dom);//累加所有relative 父dom的left和top
    let params={x:x,y:y,relative_leftright:relative_leftright,dom:this.$refs.write_dom};
    try{this.data.move_obj.mouseenter(event,params);}catch{}
  },
  //鼠标离开 触发函数
  mouseleave_:function(event,){
    let x=event.clientX;
    let y=event.clientY;
    let relative_leftright=accumulateParentOffsets(this.$refs.write_dom);//累加所有relative 父dom的left和top
    let params={x:x,y:y,relative_leftright:relative_leftright,dom:this.$refs.write_dom};
    try{this.data.move_obj.mouseleave(event,params);}catch{}

  },
    run_flow:function(){
      let body_data=JSON.parse(JSON.stringify(this.url_params))
      body_data['flow_id']=this.now_select
      try{
        if (this.base_info['run_flag']==true){
        body_data['type']="stop_flow"
        }else{
        body_data['type']="run_flow"
        }
      }
      catch{
        body_data['type']="run_flow"
      }
      this.project_post({body_data:body_data})
    },
    show_tip:function(a,b,c,d,e){
       show_tip(a,b,c,d,e)
    },
    _refresh:function(){
      //更新入参界面小三角数据
      try{
        this.base_info=this.data.flow_chat_config.dict[this.now_select].flow_chat_base_info
        this.flow_dict=this.data.flow_chat_config.dict[this.now_select].flow_chat_use_compontent
        try{
          if (this.base_info['run_flag']==true){
          this.flow_type='运行中'
          }else{
          this.flow_type='未运行'
          }
        }
        catch{
          this.flow_type='未运行'
        }
        
        //快速访问获取到进程名称
        this.process_dct=this.base_info.process_dct
        
        this.process_dct2={}
        for (let kkk in this.process_dct){this.process_dct2[kkk]=kkk}

        this.process_dct2['null']=''
        this.process_dct2['undefined']=''
        //刷新页面
        if (this.refresh.length>10){this.refresh="1"}else{this.refresh=this.refresh+"1"}
        
      }catch{}

    },
    //组件被点击
    temp_click:function(event,info){
      // lhp_run_func(this.___set_now_edit_template,)
      //显示组件面板
      //隐藏连线面板
      this.now_click_line_temp_id1=null
      this.now_click_line_temp_id2=null
      this.now_click_line_key=null;
      this.now_click_temp_id=info.key
      console.log(this.flow_dict[info.key])
      let infoe={"temp_id":info.key}
      lhp_run_func(this.data.___bind_temp_click,infoe)
      let info1={"out_key":null,"out_id":null,"in_id":null,"in_key":null}
      lhp_run_func(this.data.___bind_line_click,info1)
    },
    //连接线被点击
    line_click:function(event,params){
      let out_key=params.out_key;
      let out_id=params.out_id;
      let out_objs=this.flow_dict[out_id].out[out_key];
      let in_id=out_objs.out_id
      let in_key=out_objs.out_key
      this.now_click_line_temp_id1=out_id
      this.now_click_line_temp_id2=in_id
      this.now_click_temp_id=null
      this.now_click_line_key=out_key
      
      let info1={"out_key":out_key,"out_id":out_id,"in_id":in_id,"in_key":in_key}
      lhp_run_func(this.data.___bind_line_click,info1)
      let info2={"temp_id":null}
      lhp_run_func(this.data.___bind_temp_click,info2)
    },
    del_temp:function(event){
      let out_id=this.now_select_temp
      let value=this.flow_dict[out_id];
      let delete1={
        'delete_before':`flow_chat_config.dict.1.dict.${this.now_select}.flow_dict`,
        'lst':[
        ]
      }
      let delete_lst=[delete1]
      let postput={}
      //将绑定在这个组件上的连线全部删除
      //先删除输出连线
      
      for (let out_key in value.out) {  
        delete1.lst.push(`${value.out[out_key].out_id}.in.${value.out[out_key].out_key}`
        ) 

        let ooout_id=value.out[out_key].out_id;
        let out_obj=this.flow_dict[ooout_id].in_kwargs;
        for (let param_key in out_obj){
          if (out_obj[param_key].hasOwnProperty("in_params")&&out_obj[param_key]['in_params'][0]==out_id){
            delete1.lst.push(`${ooout_id}.in_kwargs.${param_key}.in_params`
            )
          }
        }
      }  
      //再删除输入连线
      for (let in_key in value.in) {  
        delete1.lst.push(
         `${value.in[in_key].in_id}.out.${value.in[in_key].in_key}`
        ) 
        let iiin_id=value.in[in_key].in_id;
        let in_obj=this.flow_dict[iiin_id].out_kwargs;
        for (let param_key in in_obj){
          if (in_obj[param_key].hasOwnProperty("out_params")&&in_obj[param_key]['out_params'].hasOwnProperty(out_id)){
            delete1.lst.push(
             `${iiin_id}.out_kwargs.${param_key}.out_params.${out_id}`
            )
          }
        }
      }  
      let update_val={
        "type":"change_data",
        "data_type":"set_list",//类型 修改数据
        "delete2":delete_lst
      }
      //删除组件
      delete1.lst.push(`${this.now_select_temp}`)
      //删除进程id
      let process_dct=this.del_process_from(out_id)
      if (process_dct){
        for (let iii=0;iii<process_dct.delete_lst.length;iii++){
          delete1.lst.unshift(process_dct.delete_lst[iii])
        }
        if (process_dct.postput){
lhp_deepcopy1(postput,process_dct.postput)
        }
      }
    //解除tree_type绑定
    let treepostput=null
      //绑定tree_type
      let tree_type_res=this.del_tree_types(out_id)
      if(tree_type_res!=null ){
        if ( Object.keys(tree_type_res.del_lst).length>0){
          
          for (let i=0;i< tree_type_res.del_lst.length;i++){
            delete1.lst.push(tree_type_res.del_lst[i].path)
        }
        }
        
        if (tree_type_res.postput){
          treepostput=tree_type_res.postput
        }
      }
      if(Object.keys(postput).length){
        update_val.postput=[{path:`flow_chat_config.dict.1.dict.${this.now_select}.flow_dict`,data:{}}]
        lhp_deepcopy1(update_val.postput[0].data,postput)
      }
      if(treepostput){
        if(!update_val.postput){update_val.postput=[{path:`flow_chat_config.dict.1.dict.${this.now_select}.flow_dict`,data:{}}]}
        lhp_deepcopy1(update_val.postput[0].data,treepostput)
      }
      console.log("update",update_val)
_this.data.全局配置对象.更新(update_val);
    },
    del_line:function(event){
      let out_id=this.now_select_line.out_id
      let out_key=this.now_select_line.out_key
      let in_id=this.flow_dict[out_id].out[out_key].out_id
      let in_key=this.flow_dict[out_id].out[out_key].out_key
      let delete1={
        'delete_before':`flow_chat_config.dict.1.dict.${this.now_select}.flow_dict`,
        'lst':[`${out_id}.out.${out_key}`,
          `${in_id}.in.${in_key}`

        ]
      }
      let delete_lst=[delete1]
      let postput={}
      let in_kwargs=this.flow_dict[in_id].in_kwargs
      let out_kwargs=this.flow_dict[out_id].out_kwargs
      //遍历in_id的key
      console.log("in_id的key",in_kwargs)
      for(let kk in in_kwargs){
        if (in_kwargs[kk].in_params&& in_kwargs[kk].in_params[0]==out_id){
          delete1.lst.push(
            `${in_id}.in_kwargs.${kk}.in_params`
          )
        }
      }
      //遍历out_id的key
      for(let kk in out_kwargs){
        if (out_kwargs[kk].out_params && out_kwargs[kk].out_params.hasOwnProperty(in_id)){
          delete1.lst.push(`${out_id}.out_kwargs.${kk}.out_params.${in_id}`
          )
        }
      }
      //更新数据
  let update_val={
  "type":"change_data",
  "data_type":"set_list",//类型 修改数据
  "delete2":delete_lst
  }
      let process_dct=this.del_process_from(out_id,in_id)
      console.log("process_dct",process_dct)
      console.log("del_line1",process_dct,delete1.lst)
      if (process_dct){
        for (let iii=0;iii<process_dct.delete_lst.length;iii++){
          delete1.lst.unshift(process_dct.delete_lst[iii])
        }
        console.log("del_line2",delete1.lst)
        if (process_dct.postput){
lhp_deepcopy1(postput,process_dct.postput)
        }
      }
    //解除tree_type绑定
    let treepostput=null
      //绑定tree_type
      let tree_type_res=this.del_tree_types(out_id,in_id)
      if(tree_type_res!=null ){
        if ( Object.keys(tree_type_res.del_lst).length>0){
          
          for (let i=0;i< tree_type_res.del_lst.length;i++){
            delete1.lst.unshift(tree_type_res.del_lst[i].path)
        }
        }
        if (tree_type_res.postput){
          lhp_deepcopy1(postput,tree_type_res.pustput)
        }
      }
if (Object.keys(postput).length){
  update_val.postput=[{path:`flow_chat_config.dict.1.dict.${this.now_select}.flow_dict`,data:postput}]
}
console.log("del line postput",update_val.postput,postput)
_this.data.全局配置对象.更新(update_val);
      
      
    },
    handleGlobalClick(event){
      if (this.now_select_line_menu_flag==true){
        this.now_select_line_menu_flag=false
      }
      if (this.now_select_temp_menu_flag==true){
        this.now_select_temp_menu_flag=false
      }
    },
    show_temp_menu:function(event,info){
      this.now_select_temp=info.key
      let rect = this.$refs.scroll.getBoundingClientRect();
      this.now_temp_menu_x=event.clientX-rect.left;
      this.now_temp_menu_y=event.clientY-rect.top;
      this.now_select_temp_menu_flag=true;

    },
    show_line_menu:function(event,info){
      this.now_select_line=info
      let rect = this.$refs.scroll.getBoundingClientRect();
      this.now_line_menu_x=event.clientX-rect.left;
      this.now_line_menu_y=event.clientY-rect.top;
      this.now_select_line_menu_flag=true;
      
    },
    check_select:function(){
       
      if (this.now_select==null)
      {return "position: relative;"}
      else if(!this.data.flow_chat_config.dict.hasOwnProperty(this.now_select)){
        return "display:none;position: relative;"
      }
      return "position: relative;"
    }, 
    check_select2:function(){
      if (this.now_select==null)
      {return "display:none;position: relative;"}
      else if(!this.data.flow_chat_config.dict.hasOwnProperty(this.now_select)){
        return "position: relative;"
      }
      return "display:none;position: relative;"
    },
    get_x1y1x2y2(info1,info2){
      return {x1:info1.x+this.get_w(info1.name)/2-6,y1:info1.y+this.get_h(info1.name)-6,x2:info2.x+this.get_w(info2.name)/2-6,y2:info2.y-6}
    },
    get_w(text){
      let _this=this;
      if (this.get_wh_init==false){
        this.get_wh_init=true;
    // 创建一个临时的span元素  
    _this.span = document.createElement("div");  
    // 设置span的样式，包括字体样式  
    _this.span.className = "set_server_show_b1";  
  
    _this.span.style.font = "0.9em helvetica";  
    _this.span.style.position = 'absolute'; // 避免影响页面布局  
    _this.span.style.visibility = 'hidden'; // 隐藏元素  
    // 将span添加到body中（或任何已存在的元素中）  
    document.body.appendChild(_this.span);  
    // 获取宽度  
      }
      // 将文本添加到span中  
      _this.span.textContent = text;  
      return _this.span.offsetWidth;  
      },
    get_h(text){
        let _this=this;
        if (this.get_wh_init==false){
          this.get_wh_init=true;
      // 创建一个临时的span元素  
      _this.span = document.createElement("div");  
      // 设置span的样式，包括字体样式  
      _this.span.className = "set_server_show_b1";  
    
      _this.span.style.font = "0.9em helvetica";  
      _this.span.style.position = 'absolute'; // 避免影响页面布局  
      _this.span.style.visibility = 'hidden'; // 隐藏元素  
      // 将span添加到body中（或任何已存在的元素中）  
      document.body.appendChild(_this.span);  
      // 获取宽度  
        }
        // 将文本添加到span中  
        _this.span.textContent = text;  
        return _this.span.offsetHeight;  
        },
    set_line_ltwh(dct){//设置线的left和top和宽高
      //获取开始位置
      let start=dct.start;
      let end=dct.end;
      let x_offset=Math.abs(dct.x1-dct.x2);
      let y_offset=Math.abs(dct.y1-dct.y2)
      //如果end在start正下方
      if (x_offset<5 && dct.y2>dct.x1){
        return "left:"+dct.x1+'px;top:'+dct.y1+"px;width:"+x_offset+10+"px;height:"+(dct.y2-dct.y1+20)+"px;"
      }
      //如果end在start左下方
      else if(dct.x1>dct.x2 && dct.y2>dct.x1){

        return "left:"+(dct.x1-dct.x2)+'px;top:'+dct.y1+"px;width:"+(x_offset+10)+"px;height:"+(dct.y2-dct.y1+20)+"px;"
      
      }
    },
    set_line(dct){
      let x_offset=Math.abs(dct.x1-dct.x2);
      // console.log("set_line:",x_offset<5,dct.y2>dct.x1,dct)
      //如果end在start正下方
      if (x_offset<5 && dct.y2>dct.y1){return 0}
      //如果end在start左下方
      else if(dct.x1>dct.x2 && dct.y2>dct.y1){return 1}
      //如果end在start右下方
      else if(dct.x1<dct.x2 && dct.y2>dct.y1){return 2}
      //如果end在start上方
      else if(x_offset<5 && dct.y2<dct.y1){return 3}
      //如果end在start左上方
      else if(dct.x1>dct.x2 && dct.y2<dct.y1){return 4}
      //如果end在start右上方
      else if(dct.x1<dct.x2&& dct.y2<dct.y1){return 5}
    },
    set_line_d_1(dct){//设置线的路径
      //获取开始位置
      let val={
        0:"M 0 0 L 0 "+(dct.y2-dct.y1)+" ",//如果end在start正下方
        1:"M 0 0 L 0 "+((dct.y2-dct.y1)/2+2)+" ",//如果end在start左下方
        2:"M 0 0 L 0 "+((dct.y2-dct.y1)/2+2)+" ",//如果end在start右下方
        3:`M 0 0 L 0 ${dct.y1-dct.y2+70}`,//如果end在start上方
        4:"M 0 0 L 0 32",//如果end在start左上方
        5:"M 0 0 L 0 32",//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    set_line_d_2(dct){//设置线的路径
      //获取开始位置
      let val={
        0:"",//如果end在start正下方
        1:`M 0 0 L ${dct.x1-dct.x2+3} 0`,//如果end在start左下方
        2:`M 0 0 L ${dct.x2-dct.x1+3} 0`,//如果end在start右下方
        3:"",//如果end在start上方
        4:`M 0 0 L ${(dct.x1-dct.x2)/2+3} 0`,//如果end在start左上方
        5:`M 0 0 L ${(dct.x2-dct.x1)/2+3} 0`,//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    set_line_d_3(dct){//设置线的路径
      //获取开始位置
      let val={
        0:"",//如果end在start正下方
        1:"M 0 0 L 0 "+((dct.y2-dct.y1)/2+7)+" ",//如果end在start左下方
        2:"M 0 0 L 0 "+((dct.y2-dct.y1)/2+7)+" ",//如果end在start右下方
        3:"",//如果end在start上方
        4:`M 0 0 L 0 ${dct.y1-dct.y2+77}`,//如果end在start左上方
        5:`M 0 0 L 0 ${dct.y1-dct.y2+77}`,//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    set_line_d_4(dct){//设置线的路径
      //获取开始位置
      let val={
        0:"",//如果end在start正下方
        1:``,//如果end在start左下方
        2:``,//如果end在start右下方
        3:"",//如果end在start上方
        4:`M 0 0 L ${(dct.x1-dct.x2)/2+3} 0`,//如果end在start左上方
        5:`M 0 0 L ${(dct.x2-dct.x1)/2+3} 0`,//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    set_line_d_5(dct){//设置线的路径
      //获取开始位置
      let val={
        0:"",//如果end在start正下方
        1:``,//如果end在start左下方
        2:``,//如果end在start右下方
        3:"",//如果end在start上方
        4:"M 0 0 L 0 44",//如果end在start左上方
        5:"M 0 0 L 0 44",//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    set_line_d_ltwh1(dct){
      let x1=dct.x1,y1=dct.y1,x2=dct.x2,y2=dct.y2;
      let val={
        0:`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${y2-y1+5}px;width:${3}px;`,//如果end在start正下方
        1:`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${(y2-y1)/2+5}px;width:${3}px;`,//如果end在start左下方
        2:`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${(y2-y1)/2+5}px;width:${3}px;`,//如果end在start右下方
        3:`left: ${x1+4.5}px;top:${y2-35}px;height: ${(y1-y2)+10+70}px;width:${3}px;`,//如果end在start上方
        4:`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${37}px;width:${3}px;`,//如果end在start左上方
        5:`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${37}px;width:${3}px;`,//如果end在start右上方
      }
      // console.log("ltwh1:",val[this.set_line(dct)])
      return val[this.set_line(dct)]
    },
    
    set_line_d_ltwh2(dct){
      let x1=dct.x1,y1=dct.y1,x2=dct.x2,y2=dct.y2;
      let val={
        0:``,//如果end在start正下方
        1:`left: ${x2+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${3}px;width:${x1-x2+33}px;`,//如果end在start左下方
        2:`left: ${x1+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${3}px;width:${x2-x1+5}px;`,//如果end在start右下方
        3:``,//如果end在start上方
        4:`left: ${x1-(x1-x2)/2+4.5}px;top:${y1+35}px;height: ${3}px;width:${(x1-x2)/2+7}px;`,//如果end在start左上方
        5:`left: ${x1+4.5}px;top:${y1+35}px;height: ${3}px;width:${(x2-x1)/2+7}px;`,//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    
    set_line_d_ltwh3(dct){
      let x1=dct.x1,y1=dct.y1,x2=dct.x2,y2=dct.y2;
      let val={
        0:``,//如果end在start正下方
        1:`left: ${x2+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${(y2-y1)/2+5}px;width:${3}px;`,//如果end在start左下方
        2:`left: ${x2+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${(y2-y1)/2+5}px;width:${3}px;`,//如果end在start右下方
        3:``,//如果end在start上方
        4:`left: ${x1-(x1-x2)/2+4.5}px;top:${y2-35}px;height: ${70+y1-y2}px;width:${10}px;`,//如果end在start左上方
        5:`left: ${x1+(x2-x1)/2+4.5}px;top:${y2-35}px;height: ${70+y1-y2}px;width:${10}px;`,//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    
    set_line_d_ltwh4(dct){
      let x1=dct.x1,y1=dct.y1,x2=dct.x2,y2=dct.y2;
      let val={
        0:``,//如果end在start正下方
        1:``,//如果end在start左下方
        2:``,//如果end在start右下方
        3:``,//如果end在start上方
        4:`left: ${x2+4.5}px;top:${y2-35}px;height: ${3}px;width:${(x1-x2)/2+7}px;`,//如果end在start左上方
        5:`left: ${x1+(x2-x1)/2+4.5}px;top:${y2-35}px;height: ${3}px;width:${(x2-x1)/2+7}px;`,//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    
    set_line_d_ltwh5(dct){
      let x1=dct.x1,y1=dct.y1,x2=dct.x2,y2=dct.y2;
      let val={
        0:``,//如果end在start正下方
        1:``,//如果end在start左下方
        2:``,//如果end在start右下方
        3:``,//如果end在start上方
        4:`left: ${x2+4.5}px;top:${y2-35}px;height: ${55}px;width:${3}px;`,//如果end在start左上方
        5:`left: ${x2+4.5}px;top:${y2-35}px;height: ${55}px;width:${3}px;`,//如果end在start右上方
      }
      return val[this.set_line(dct)]
    },
    set_line_d3(dct){//设置箭头的反转
      //获取开始位置
      let start=dct.start;
      let end=dct.end;
      let x_offset=Math.abs(dct.x1-dct.x2);
      let y_offset=Math.abs(dct.y1-dct.y2);
      //如果end在start正下方
      if (x_offset<5 && dct.y2>dct.x1){
        return ""
      }

    },
    svg_down(event,params={}){
      let rect = this.$refs.scroll.getBoundingClientRect();
      this.write_line_now_obj={
        x:event.clientX-rect.left-25,
        y:event.clientY-rect.top,
        name:''
      }
      this.连线_clientX=event.clientX;
      this.连线_clientY=event.clientY;
      this.连线_startx=this.write_line_now_obj.x;
      this.连线_starty=this.write_line_now_obj.y;
      this.write_line_start_key=params.key;
      this.write_line_flag=true;
    },
    //检测输出组件与输入组件是否存在连线
    check_line(out_id,in_id){
      
      let start_obj=this.flow_dict[in_id]
      let start_obj_in_kwargs=start_obj.in_kwargs;
      for (let kk in start_obj_in_kwargs){
        if (start_obj_in_kwargs[kk].in_params && start_obj_in_kwargs[kk].in_params[0]==out_id){
          return {"type":true,'data':start_obj_in_kwargs[kk].in_params[2]}
        }
      }
      return {"type":false}
    },
    //在已有连线的组件上进行连线
    add_line_params(out_id,in_id,check_line_res,out_params_info){
let _this=this;
      let key1=out_params_info.key1//出参组件的 出参 id
      let key2=out_params_info.key2//入参组件的 入参 id
      //1.更新 入参组件的 入参连线index计数
      //2.更新 入参组件的 入参连线 的数据
      let in_kwargs_data={}
      in_kwargs_data[key2]={"in_params":{},"in_type1":"1",'v1_':[out_id,key1]}
                      //--------输出的key和value
      in_kwargs_data[key2]['in_params']=[out_id,key1,check_line_res.data]
      //4.更新 出参组件的 出参连线index计数
      //5.更新 出参组件的 出参连线 的数据
      let out_kwargs_data={}
      out_kwargs_data[key1]={"out_params":{}}
                      //--------输出的key和value
      out_kwargs_data[key1]['out_params'][in_id]={}
      out_kwargs_data[key1]['out_params'][in_id][key2]={"key":check_line_res.data}
//更新数据 
let update_val={
  "type":"change_data",
  "data_type":"set_list",//类型 修改数据
  update_params:[
    {
      name:"检查目标元素是否存在 存在则不执行该操作",
      path:`flow_chat_config.dict.1.dict.${this.now_select}.flow_dict.${in_id}.in_kwargs.${key2}.in_params`,
      message:"已经拥有此传参了",
      use:"check_true"
    }
  ],
  "postput":[
    {
      'path':`flow_chat_config.dict.1.dict.${this.now_select}.flow_dict.${out_id}.out_kwargs`,
      'data':out_kwargs_data
    },
    //更新
    {
      'path':`flow_chat_config.dict.1.dict.${this.now_select}.flow_dict.${in_id}.in_kwargs`,
      'data':in_kwargs_data
    },
  ],
}
_this.data.全局配置对象.更新(update_val);
    },
    svg_up_x(params,out_params_info){//创建连线
      let out_id=this.write_line_start_key
      let in_id=params.key;
      
      let key1=out_params_info.key1//出参组件的 出参 id
      let key2=out_params_info.key2//入参组件的 入参 id
      let start_obj=this.flow_dict[out_id]
      let end_obj=this.flow_dict[in_id]
      //判断输出组件和输入组件是否已经拥有连线 
      let has_line=this.check_line(out_id,in_id);
      if (has_line.type==true){
        this.add_line_params(out_id,in_id,has_line,out_params_info)
        return
      }
      // console.log(start_obj,end_obj)
      //1.更新 入参组件的 入参连线index计数
      //2.更新 入参组件的 入参连线 的数据
      let in_kwargs_data={}
      in_kwargs_data[key2]={"in_params":{}}
      in_kwargs_data[key2].in_type1='1'//0表示固定传参 1表示组件传参 2表示配置设参
      in_kwargs_data[key2].v1_=[out_id,key1]
                      //--------输出的key和value
      in_kwargs_data[key2]['in_params']=[out_id,key1,["@out_idx","@in_idx"]]
      //4.更新 出参组件的 出参连线index计数
      //5.更新 出参组件的 出参连线 的数据
      let out_kwargs_data={}
      out_kwargs_data[key1]={"out_params":{}}
                      //--------输出的key和value
      out_kwargs_data[key1]['out_params'][in_id]={}
      out_kwargs_data[key1]['out_params'][in_id][key2]={"key":["@out_idx","@in_idx"]}
      let postput={
        'path':`flow_chat_config.dict.1.dict.${this.now_select}.flow_dict`,
        'data':{}
      }
      
      postput.data[this.write_line_start_key]={}
      lhp_deepcopy1(postput.data[this.write_line_start_key],{"out":{"@out_idx":{
                                                        "out_id":params.key,
                                                        "out_key":"@in_idx",}}})
      lhp_deepcopy1(postput.data[this.write_line_start_key],{"out_kwargs":out_kwargs_data})
      lhp_deepcopy1(postput.data[this.write_line_start_key],{"out_idx":"@out_idx"})
      postput.data[params.key]={}
      lhp_deepcopy1(postput.data[params.key],{"in":{
                                                                  "@in_idx":{
                                                                    "in_id":this.write_line_start_key,
                                                                    "in_key":"@out_idx",
                                                                  }
                                                              }})
      lhp_deepcopy1(postput.data[params.key],{"in_kwargs":in_kwargs_data})
      lhp_deepcopy1(postput.data[params.key],{"in_idx":"@in_idx"})
      //给进程上下绑定进程id
      let process_data=this.set_process_from(out_id,in_id);
      if (process_data!=null){
        lhp_deepcopy1(postput.data,process_data.postput)
      }
      //绑定tree_type
      let tree_type_res=this.set_tree_types(out_id,in_id)
      if(tree_type_res!=null && Object.keys(tree_type_res.postput.data).length>0){
        lhp_deepcopy1(postput.data,tree_type_res.postput.data)
      }
//更新数据 
let update_val={
  "type":"change_data",
  "data_type":"set_list",//类型 修改数据
  update_params:[
    {//将路径为path的数据 进行 +1操作 并且存入属性add中 提供给data里面携带@add的属性调用
      name:'@out_idx',
      path:`flow_chat_config.dict.1.dict.${this.now_select}.flow_dict.${this.write_line_start_key}.out_idx`,//数据路径
      use:'++s'
    },
    {//将路径为path的数据 进行 +1操作 并且存入属性add中 提供给data里面携带@add的属性调用
      name:'@in_idx',
      path:`flow_chat_config.dict.1.dict.${this.now_select}.flow_dict.${params.key}.in_idx`,//数据路径
      use:'++s'
    }, 
    {
      name:"检查目标元素是否存在 存在则不执行该操作",
      path:`flow_chat_config.dict.1.dict.${this.now_select}.flow_dict.${params.key}.in_kwargs.${key2}.in_params`,
      message:"已经拥有此传参了",
      use:"check_true"
    }
  ],
  "postput":[postput],
}
_this.data.全局配置对象.更新(update_val);

this.write_line_flag=false;
    },
    //连线点击
    svg_up(event,params={}){
      let __this=this;
      let start_obj=this.flow_dict[this.write_line_start_key]
      let end_obj=this.flow_dict[params.key]
      if(this.write_line_flag==true){
        if(params.key!=this.write_line_start_key){
          let start_out_kwargs={};
          let end_in_kwargs={};
          let in_kwargs=this.flow_dict[params.key].in_kwargs;
          let out_kwargs=this.flow_dict[this.write_line_start_key].out_kwargs;
          if(!out_kwargs){Vue.prototype.$notify({type: 'error',message: '输出组件没有出参'});return}
          if(!in_kwargs){Vue.prototype.$notify({type: 'error',message: '输入组件没有入参'});return}
          
          for (let key in in_kwargs){
            if (!in_kwargs[key].in_params){end_in_kwargs[key]=in_kwargs[key].name;}
          }

          if(!(Object.keys(end_in_kwargs)).length){Vue.prototype.$notify({type: 'error',message: '输入组件入参不需要传递了'});return}
          for (let key in out_kwargs){
            start_out_kwargs[key]=out_kwargs[key].name;
          }
          select2__({
            "title":`${start_obj.name}->${end_obj.name}`,
          "select1":start_out_kwargs,"select2":end_in_kwargs,
            callback:function(out_params_info){__this.svg_up_x(params,out_params_info)}
          })
          
        }
      }
    },
    svg_up2(event){
      if(this.write_line_flag==true){

        this.write_line_flag=false;
      }
    },
    handleMouseDown(event, params = {}) {  
      if (event.button === 2) {
        // 如果是右键，阻止进一步处理
        return;
    }
      console.log('Mouse down, but ignoring params:', event);  
      this.拖动_clientX=event.clientX;
      this.拖动_clientY=event.clientY;
      let oojb=this.flow_dict[params.key];
      this.拖动_startx=oojb.x;
      this.拖动_starty=oojb.y;
      this.拖动_key=params.key;
      this.拖动_flag=true;
      console.log('旧坐标:',this.拖动_startx,this.拖动_starty)
      // 这里默认不处理传入的params，因为它不是从事件直接传入的  
      // 你可以在其他地方调用这个函数时传入params  
      // 你可能想在这里做一些初始化工作，比如设置一个标志位  
    },  

handleMouseLeave(event){
  // this.movein_flag=false;
},
    handleMouseMove(event) {  
      // this.movein_flag=true
      // if (this.拖动_flag == true){
      //   let oojb=this.flow_dict[this.拖动_key];
      //   oojb.x=this.拖动_startx+event.clientX-this.拖动_clientX;
      //   oojb.y=this.拖动_starty+event.clientY-this.拖动_clientY;
      // }else if(this.write_line_flag==true){

      //   this.write_line_now_obj.x=this.连线_startx+event.clientX-this.连线_clientX;
      //   this.write_line_now_obj.y=this.连线_starty+event.clientY-this.连线_clientY;
      // }
    },  
  
    handleMouseUp(event) {  
      // if(this.拖动_flag==true){
      //   this.拖动_flag=false;
        
      //   let new_x=this.拖动_startx+event.clientX-this.拖动_clientX;
      //   let new_y=this.拖动_starty+event.clientY-this.拖动_clientY;
      //   //如果没有拖动产生距离 那么触发click
      //   if ((this.拖动_startx==new_x) && (this.拖动_starty==new_y)){
      //     console.log("this.拖动_startx,new_x,this.拖动_starty,new_y",this.拖动_startx,new_x,this.拖动_starty,new_y)
      //     this.temp_click(event,{key:this.拖动_key})
      //   }else{

      //     let path=`flow_chat_config.dict.1.dict.${this.now_select}.flow_dict.${this.拖动_key}`
      //     lhp_run_func(this.data.___update,{"type":"change_data","data_type":"postput","path":path,"data":{"x":new_x,"y":new_y}});
    
      //   }
      //   // let temp_v= this.info_dct[this.拖动_key];
        
      //   // console.log('新坐标:',temp_v.x,temp_v.y);
      // }else if(lhp_run_func(this.data.___get_now_type)&&this.movein_flag){//如果处于组件拖拽进来的状态
      //   // console.log("mouseup2")
      //   // let new_key=Object.keys(this.info_dct).reduce((max, current) => Math.max(max, current), -Infinity)+1;
      //   // console.log("mouseup3",new_key)
      //   let rect = this.$refs.scroll.getBoundingClientRect();  
      //   let temp_info=JSON.parse(JSON.stringify(lhp_run_func(this.data.___get_now_info)))
      //   if (!(temp_info.in_kwargs)){temp_info.in_kwargs={}}
      //   if (!(temp_info.tree_type)){temp_info.tree_type=0}
      //   temp_info.tree_type_from={}//当前组件的tree_type由哪些决定
      //   if (!(temp_info.tree_type_from)){temp_info.tree_type_from=0}

      //   try{
      //     for(let kk in temp_info.in_kwargs){
      //       temp_info.in_kwargs[kk].in_type1="0"//0表示固定传参 1表示组件传参 2表示配置设参
      //       temp_info.in_kwargs[kk].v0=temp_info.in_kwargs[kk].default//0表示固定传参 1表示组件传参 2表示配置设参
      //       temp_info.in_kwargs[kk].v1_=[null,null]//0表示固定传参 1表示组件传参 2表示配置设参
      //       temp_info.in_kwargs[kk].v2=""
      //       temp_info.in_kwargs[kk].in_type3='0'//0表示不强行转换类型
      //     }
      //   }
      //   catch{}
      //   temp_info.in_kwargs['-1']={
      //     "name": "flag",
      //     "note": "通过传入值来控制组件的运行顺序 不传值时表示按照默认方式运行",
      //     "default": "0",
      //     "type": "str",
      //     "in_type1": "0",
      //     "v0": "0",
      //     "v1_": [
      //         null,
      //         null
      //     ],
      //     "v2": "",
      //     "in_type3": "0"
      // }
      //   let update_params=[
      //     {//将路径为path的数据 进行 +1操作 并且存入属性add中 提供给data里面携带@add的属性调用
      //       name:'@add_index',
      //       path:`flow_chat_config.dict.${this.now_select}.flow_chat_base_info.idx`,//数据路径
      //       use:'++s'
      //     },
          
      //   ] 
      //   let postput=[
      //     {
      //       'path':`flow_chat_config.dict.1.dict.${this.now_select}.flow_dict.@add_index`,
      //       'data':temp_info
      //     },
          
      //     {
      //       'path':`flow_chat_config.dict.${this.now_select}.flow_chat_base_info`,
      //       'data':{"idx":"@add_index"}
      //     },
      //   ]
        
      //   temp_info['process_id']=null
      //   temp_info['process_from']={}
      //   //如果目标是进程创建类的组件  那么会新建新的进程id 以及进程名称 和可更改进程名的标志
      //   if (temp_info.temp_type=='process'){
      //     update_params.push(
      //       {
      //         name:'@add_process_id',
      //         path:`flow_chat_config.dict.${this.now_select}.flow_chat_base_info.process_idx`,
      //         use:"++s"
      //       }
      //     )
      //     postput.push({
      //       'path':`flow_chat_config.dict.${this.now_select}.flow_chat_base_info`,
      //       'data':{'process_idx':'@add_process_id',"process_dct":{"@add_process_id":temp_info.process_name||'未命名的进程名称'}}
      //     })
          
      //   temp_info['process_id']='@add_process_id'
      //   temp_info['process_change']=true
      //   temp_info['process_from']['@add_process_id']={'@add_index':["@add_index"]}//创建进程的组件的 进程id来源于自身


      //   }
      //   lhp_deepcopy1(temp_info,{
      //     temp_name:temp_info.name,
      //     x:event.clientX-rect.left-60,
      //     y:event.clientY-rect.top-60,
      //     out_idx:0,
      //     in_idx:0,
      //     out:{},
      //     in:{}
      // })
      //   //更新数据
      //   let update_val={
      //     "type":"change_data",
      //     "data_type":"set_list",//类型 修改数据
      //     update_params:update_params,
      //     "postput":postput,
      //   }
      // _this.data.全局配置对象.更新(update_val);

      // }else if(this.write_line_flag==true){
      //   this.write_line_flag=false;
      // }
      
       
    }  ,
    check_type:function(){
      if (typeof this.$el.querySelector === 'function') {  
        return true
    } else { return false }
    },
    //id不存在则返回true
    check_p:function(process_id){return process_id==null ||(!(this.process_dct[process_id]))},

    //当组件间进行参数传递时  建立相应的进程关系
    process_add_lst:function(use_compontent,lst,temp_id,put_process_id,put_lst){
      //process_from={1:{'1':{}}}
      //process_from_fast={1:{'from_key':1,fast:{1:true,2:true,3:true}}}
      let now_info=use_compontent[temp_id]
      put_lst=JSON.parse(JSON.stringify({"a":put_lst}))['a']
      let put_dct={};
      // console.log(put_lst)
      for (let k=0;k<put_lst.length;k++){
        put_dct[put_lst[k]]=true
      }
    // console.log('put_lst,put_dct',put_lst,put_dct)
      // let process_id=now_info.process_id
      let check_id=null
    // console.log("add_lst_flag",this.check_p(process_id)==check_p_flag)
      // if (this.check_p(put_process_id)==check_p_flag){
        let in_ids=null;
        let in_kwargs=now_info.in_kwargs,out_kwargs=now_info.out_kwargs;
        for(let i in in_kwargs){
          try{
          check_id=in_kwargs[i].in_params[0];
          //如果目标id不在目标字典中  那么将process_id传入
          if (!(check_id in put_dct)){
              lst.push([put_process_id,temp_id,check_id,put_lst])
          }
        }catch{}
        }
        for(let i in out_kwargs){
          try{
          in_ids=Object.keys(out_kwargs[i].out_params)
          for (let j in in_ids){
            
            check_id=in_ids[j];
            //如果目标id不在目标字典中  那么将process_id传入
            if (!(check_id in put_dct)){
                lst.push([put_process_id,temp_id,check_id,put_lst])
            }

            }}catch{}
        }
      // }
    },
    set_process_from:function(输出组件_id,输入组件_id){
       let use_compontent=JSON.parse(JSON.stringify(this.flow_dict));
       let 输出组件_进程id=use_compontent[输出组件_id].process_id;
       let 输入组件_进程id=use_compontent[输入组件_id].process_id;
       console.log("输出组件_进程id",输出组件_进程id)
       let lst=[];//待处理队列
       let post_dct={};//要进行post的对象
       if (!this.check_p(输出组件_进程id)){
        console.log("输出拥有进程id:",!this.check_p(输出组件_进程id))
        lst.push(
          {
            输出组件_进程id:输出组件_进程id,
            输出组件_id:输出组件_id,
            输入组件_id:输入组件_id,
            进程路径:this.get_process_lst_by_process_id(输出组件_id,输出组件_进程id)
          }
        )
       }
       if (!this.check_p(输入组件_进程id)){
        // console.log("inininini",in_id,输入组件_进程id)
       console.log("输入拥有进程id:",this.check_p(输出组件_进程id))
        lst.push(
          {
            输出组件_进程id:输入组件_进程id,
            输出组件_id:输入组件_id,
            输入组件_id:输出组件_id,
            进程路径:this.get_process_lst_by_process_id(输入组件_id,输入组件_进程id)
          })
       }
       let 临时记录组件当前进程id={};
       let 当前处理项=null,新路径=null,当前处理项数据=null;
       while (lst.length){
        当前处理项=lst.pop();//取出当前处理项
        //如果输入组件已拥有进程id 则跳过
        当前处理项数据=this.flow_dict[当前处理项.输入组件_id];
        if(!this.check_p(当前处理项数据.process_id) || (临时记录组件当前进程id[当前处理项.输入组件_id])){continue}
        //存入临时记录表 避免重复添加
        临时记录组件当前进程id[当前处理项.输入组件_id]=true;
        //更新路径
        新路径=JSON.parse(JSON.stringify({'a':当前处理项.进程路径}))['a'];
        新路径.push(当前处理项.输入组件_id);
        //写入数据
        post_dct[当前处理项.输入组件_id]={
          process_id:当前处理项.输出组件_进程id,
          process_from:{}
        }
        post_dct[当前处理项.输入组件_id].process_from[当前处理项.输出组件_进程id]=新路径;
        //遍历出参和入参 将组件加入待处理列表
        let in_kwargs=当前处理项数据.in_kwargs,out_kwargs=当前处理项数据.out_kwargs;
        for(let i in in_kwargs){
          try{
          check_id=in_kwargs[i].in_params[0];
          //如果目标id不在目标字典中  那么将process_id传入
          lst.push(
            {
              输出组件_进程id:当前处理项.输出组件_进程id,
              输出组件_id:当前处理项.输入组件_id,
              输入组件_id:check_id,
              进程路径:新路径
            })
        }catch{}
        }
        for(let i in out_kwargs){
          try{
          in_ids=Object.keys(out_kwargs[i].out_params)
          for (let j in in_ids){
            
            check_id=in_ids[j];
            //如果目标id不在目标字典中  那么将process_id传入
            lst.push(
              {
                输出组件_进程id:当前处理项.输出组件_进程id,
                输出组件_id:当前处理项.输入组件_id,
                输入组件_id:check_id,
                进程路径:新路径
              })

            }}catch{}
        }}

       return post_dct
      },
    //当删除组件 或者删除连线时 删除相应的进程关系
    process_add_lst2:function(lst,temp_id,put_process_id,put_lst=null,check_id=null){
      // console.log("lst:",lst)
      // console.log("temp_id:",temp_id)
      // console.log("put_process_id:",put_process_id)
      // console.log("put_lst:",put_lst)
      // console.log("check_id:",check_id)
        //process_from={1:{'1':{}}}
        //process_from_fast={1:{'from_key':1,fast:{1:true,2:true,3:true}}}
        let now_info=this.flow_dict[temp_id]
        // let process_id=now_info.process_id
      // console.log("add_lst_flag",this.check_p(process_id)==check_p_flag)
        // if (this.check_p(put_process_id)==check_p_flag){
          let in_ids=null,del_lst=null,new_lst=null;
          let in_kwargs=now_info.in_kwargs,out_kwargs=now_info.out_kwargs,add_llst=[];
          if (check_id!=null){
        // console.log("temp->check_id",temp_id,check_id,this.flow_dict[check_id].process_from[put_process_id])
            try{
              del_lst=this.flow_dict[check_id].process_from[put_process_id][temp_id];
              // console.log("del_lst",del_lst)
              if (!del_lst){return}
              // console.log(`del_lst ${check_id}(check_id) ${put_process_id}(process_id)`,this.flow_dict[check_id],put_process_id,del_lst)
              lst.push([put_process_id,temp_id,check_id,del_lst])
            }catch{}
            return
          }
      ///////////////////////
          for(let i in in_kwargs){
            try{
  add_llst.push(in_kwargs[i].in_params[0])}catch{}}
      for(let i in out_kwargs){
            try{
            in_ids=Object.keys(out_kwargs[i].out_params)
            for (let j in in_ids){
  add_llst.push(in_ids[j])
            }}catch{}}
  
  if(put_lst==null&&check_id==null){
      
  for(let ii=0;ii<add_llst.length;ii++){
      // console.log("check",add_llst[ii],this.flow_dict[add_llst[ii]].process_from[put_process_id][temp_id])
      check_id=add_llst[ii]
      del_lst=this.flow_dict[check_id].process_from[put_process_id][temp_id]
      try{del_lst=this.flow_dict[check_id].process_from[put_process_id][temp_id]}catch{continue}
      if(!del_lst){continue}
      new_lst=JSON.parse(JSON.stringify({"a":del_lst}))["a"];
      new_lst.pop();
        lst.push([put_process_id,temp_id,check_id,del_lst])
      
  }
         return 
      }
  let put_lst_str=put_lst.join("_")
  //let test_str=''
  for(let ii=0;ii<add_llst.length;ii++){
      // console.log("check",add_llst[ii],this.flow_dict[add_llst[ii]].process_from[put_process_id][temp_id])
      check_id=add_llst[ii]
      try{del_lst=this.flow_dict[check_id].process_from[put_process_id][temp_id]}catch{continue}
      if(!del_lst){continue}
      new_lst=JSON.parse(JSON.stringify({"a":del_lst}))["a"];
      new_lst.pop();
      if (new_lst.join("_")==put_lst_str){
          //test_str=test_str+check_id+' '
        lst.push([put_process_id,temp_id,check_id,del_lst])
      }
  }
      
      //if(!test_str){console.log(`${temp_id}=>${check_id}`,test_str)}
      },
    //
    del_process_from__x2:function(obj){
      if(!obj.临时_process_dct[obj.组件id]){
        let process_from=obj.process_from || this.flow_dict[obj.组件id].process_from || {};
        for(let 进程id in process_from){
          obj.临时_process_dct[进程id]=process_from[进程id].join('_')
        }
      }
      return obj.临时_process_dct[obj.组件id]
    },
    del_process_from__x:function(obj){
      let lst=[];
      if(obj.flag=='删除组件'){
        let 输出组件数据=this.flow_dict[obj.输出组件_id];
        let process_from=输出组件数据.process_from||{};
        for(let k in process_from){
          lst.push(
            {
              组件id:obj.输出组件_id,
              路径:process_from[k],
              进程id:k
            }
          )
        }
      }
      else if(obj.flag=='删除连线'){
        let 输出组件数据=this.flow_dict[obj.输出组件_id];
        let 输入组件数据=this.flow_dict[obj.输入组件_id];
        let process_dct1=输出组件数据.process_from||{};
        let process_dct2=输入组件数据.process_from||{};
        //判断输入组件 路径是否由输出组件 路径传入
        for(let k in process_dct1){
          if(process_dct2[k].join("_")==(process_dct1[k].join("_")+'_'+obj.输入组件_id)){
            lst.push({
              组件id:obj.输入组件_id,
              路径:process_dct2[k],
              进程id:k
            }
            )
          }
        }
        //判断输出组件 路径是否由输入组件 路径传入
        for(let k in process_dct2){
          if(process_dct1[k].join("_")==(process_dct2[k].join("_")+'_'+obj.输出组件_id)){
            lst.push({
              组件id:obj.输出组件_id,
              路径:process_dct1[k],
              进程id:k
            }
            )
          }
        }
      }else if(obj.flag=='删除指定路径'){
        let 路径=obj.路径;
        let 进程id=obj.进程id;
        let 组件id=obj.组件id;
        let 组件数据=this.flow_dict[组件id];
        let in_kwargs=组件数据.in_kwargs;
        let out_kwargs=组件数据.out_kwargs;
        for(let i in in_kwargs){
          try{
            check_id=in_kwargs[i].in_params[0];
            if ((this.flow_dict[check_id].process_from[进程id]||['#']).join("_")==(路径.join("_")+'_'+check_id)){
              lst.push({
                组件id:check_id,
                路径:this.flow_dict[check_id].process_from[进程id],
                进程id:进程id
              })
            }
        }catch{}
        }
        
      for(let i in out_kwargs){
        try{
        in_ids=Object.keys(out_kwargs[i].out_params)
        for (let j in in_ids){
          check_id=in_ids[j];
          if ((this.flow_dict[check_id].process_from[进程id]||['#']).join("_")==(路径.join("_")+'_'+check_id)){
            lst.push({
              组件id:check_id,
              路径:this.flow_dict[check_id].process_from[进程id],
              进程id:进程id
            })
          }
        }}catch{}}}
      return lst
    },
    del_process_from_get_process_id:function(obj){
      let add_new_prcess=obj.add_new_prcess;
      let del_路径_dct=obj.del_路径_dct;
      let del_line=obj.del_line;
      let del_id=obj.del_id;
      let 组件id=obj.组件id;
      // console.log("组件id为",组件id,'开始获取新id')
      // console.log("为删除processid的添加新的进程id",JSON.parse(JSON.stringify(obj)));
      // console.log("为删除processid的添加新的进程id #1")
      let 组件数据=this.flow_dict[组件id];
      // console.log("为删除processid的添加新的进程id #2")
      let in_kwargs=组件数据.in_kwargs;
      // console.log("为删除processid的添加新的进程id #3")
      let out_kwargs=组件数据.out_kwargs;
      // console.log("为删除processid的添加新的进程id #4")
      let check_id=null;
      // console.log("为删除processid的添加新的进程id #5",in_kwargs,out_kwargs)
      //遍历入参和出参 获取到新的process_id
      for(let i in in_kwargs){
        try{
          check_id=in_kwargs[i].in_params[0];
          if (check_id==del_id){continue}
          if(del_line && del_line[0]==check_id && del_line[1]==组件id){continue}
          let check_process_from=this.flow_dict[check_id].process_from||{};
          let del_lst=del_路径_dct[check_id];
          
      // console.log("为删除processid的添加新的进程id #6",JSON.parse(JSON.stringify(check_process_from)))
          let add_new=add_new_prcess[check_id];
          // console.log("add_new_prcess",add_new_prcess)
          //如果目标组件id拥有新的进程id 那么直接设置
          if(add_new){
            for(let check_process_id in add_new){
              let res={};
              // console.log("为删除processid的添加新的进程id #8")
              res[组件id]={process_id:check_process_id,process_from:{}};
              // console.log("为删除processid的添加新的进程id #9")
              let new_lst=JSON.parse(JSON.stringify(add_new[check_process_id]));
              // console.log("为删除processid的添加新的进程id #10")
              new_lst.push(组件id);
              // console.log("为删除processid的添加新的进程id #11")
              res[组件id].process_from[check_process_id]=new_lst;
              // console.log("为删除processid的添加新的进程id #12",new_lst)
              return res

            }
          }
          for(let check_process_id in check_process_from){
            if(del_lst){
              //来源没有被删除
              if (!del_lst.includes(check_process_id)){
                // console.log("为删除processid的添加新的进程id #7")
                let res={};
                // console.log("为删除processid的添加新的进程id #8")
                res[组件id]={process_id:check_process_id,process_from:{}};
                // console.log("为删除processid的添加新的进程id #9")
                let new_lst=JSON.parse(JSON.stringify(check_process_from[check_process_id]));
                // console.log("为删除processid的添加新的进程id #10")
                new_lst.push(组件id);
                // console.log("为删除processid的添加新的进程id #11")
                res[组件id].process_from[check_process_id]=new_lst;
                // console.log("为删除processid的添加新的进程id #12",new_lst)
                return res
              }
            }else{
              // console.log("为删除processid的添加新的进程id #7")
              let res={};
              // console.log("为删除processid的添加新的进程id #8")
              res[组件id]={process_id:check_process_id,process_from:{}};
              // console.log("为删除processid的添加新的进程id #9")
              let new_lst=JSON.parse(JSON.stringify(check_process_from[check_process_id]));
              // console.log("为删除processid的添加新的进程id #10")
              new_lst.push(组件id);
              // console.log("为删除processid的添加新的进程id #11")
              res[组件id].process_from[check_process_id]=new_lst;
              // console.log("为删除processid的添加新的进程id #12",new_lst)
              return res
            }
          }
      }catch{}
      }
      
    for(let i in out_kwargs){
      try{
      in_ids=Object.keys(out_kwargs[i].out_params)
      for (let j in in_ids){
        check_id=in_ids[j];
        
        // console.log("为删除processid的添加新的进程id #7-1 check_id",check_id)
        if (check_id==del_id){continue}
        if(del_line && del_line[0]==组件id && del_line[1]==check_id){continue}
        // console.log("为删除processid的添加新的进程id #7-2 check_id",check_id)
        let check_process_from=this.flow_dict[check_id].process_from||{};
        let del_lst=del_路径_dct[check_id];
        
        // console.log("为删除processid的添加新的进程id #7-3 check_id",check_process_from)
        let add_new=add_new_prcess[check_id];
        // console.log("add_new_prcess",add_new_prcess)
        //如果目标组件id拥有新的进程id 那么直接设置
        if(add_new){
          for(let check_process_id in add_new){
            let res={};
            // console.log("为删除processid的添加新的进程id #8")
            res[组件id]={process_id:check_process_id,process_from:{}};
            // console.log("为删除processid的添加新的进程id #9")
            let new_lst=JSON.parse(JSON.stringify(add_new[check_process_id]));
            // console.log("为删除processid的添加新的进程id #10")
            new_lst.push(组件id);
            // console.log("为删除processid的添加新的进程id #11")
            res[组件id].process_from[check_process_id]=new_lst;
            // console.log("为删除processid的添加新的进程id #12",new_lst)
            return res

          }
        }
        for(let check_process_id in check_process_from){
          if(del_lst){
            //来源没有被删除
            if (!del_lst.includes(check_process_id)){
              // console.log("为删除processid的添加新的进程id #7")
              let res={};
              // console.log("为删除processid的添加新的进程id #8")
              res[组件id]={process_id:check_process_id,process_from:{}};
              // console.log("为删除processid的添加新的进程id #9")
              let new_lst=JSON.parse(JSON.stringify(check_process_from[check_process_id]));
              // console.log("为删除processid的添加新的进程id #10")
              new_lst.push(组件id);
              // console.log("为删除processid的添加新的进程id #11")
              res[组件id].process_from[check_process_id]=new_lst;
              // console.log("为删除processid的添加新的进程id #12",new_lst)
              return res
            }
          }else{
            // console.log("为删除processid的添加新的进程id #7")
            let res={};
            // console.log("为删除processid的添加新的进程id #8")
            res[组件id]={process_id:check_process_id,process_from:{}};
            // console.log("为删除processid的添加新的进程id #9")
            let new_lst=JSON.parse(JSON.stringify(check_process_from[check_process_id]));
            // console.log("为删除processid的添加新的进程id #10")
            new_lst.push(组件id);
            // console.log("为删除processid的添加新的进程id #11")
            res[组件id].process_from[check_process_id]=new_lst;
            // console.log("为删除processid的添加新的进程id #12",new_lst)
            return res
          }
        }
      
      }}catch{}}


    },
    del_process_from:function(obj){
      let 输出组件_id=obj.out_id;
      let 输入组件_id=obj.in_id;
      let del_id=obj.del_id;
      let del_line=null;
      let 待处理列表=[];
      let del_temp_dct={};//存放删掉进程的组件id {组件id:true}
      let del_路径_dct={};//存放删掉的路径  {组件id:[进程id]}
        let res={
          delete_lst:[],
          postput:{}
        };
        if(!输入组件_id){
          待处理列表=this.del_process_from__x({
            flag:"删除组件",
            输出组件_id:输出组件_id
          });
          // console.log("要删除的进程#########初始化0:","删除组件",JSON.parse(JSON.stringify(待处理列表)))
        }else{
          del_line=[输出组件_id,输入组件_id];

          待处理列表=this.del_process_from__x({
            flag:"删除连线",
            输出组件_id:输出组件_id,
            输入组件_id:输入组件_id
          });
          
          // console.log("要删除的进程#########初始化0:","删除连线",JSON.parse(JSON.stringify(待处理列表)))
        }
        while (待处理列表.length){
          let obj=待处理列表.pop();
          // res.delete_lst.push(obj.组件id+'.process_from.'+obj.进程id);
          if(!del_路径_dct[obj.组件id]){del_路径_dct[obj.组件id]=[obj.进程id]}
          else{
            if(!del_路径_dct[obj.组件id].includes(obj.进程id)){

              del_路径_dct[obj.组件id].push(obj.进程id)
            }}
          // console.log("要删除的进程#########1:","delete_lst",JSON.parse(JSON.stringify(res.delete_lst)))
          if(this.flow_dict[obj.组件id].process_id==obj.进程id && del_id!=obj.组件id){
            res.postput[obj.组件id]={process_id:null}
            del_temp_dct[obj.组件id]=true;
          }
          let 待处理列表2=this.del_process_from__x({
            flag:"删除指定路径",
            路径:obj.路径,
            进程id:obj.进程id,
            组件id:obj.组件id,
          });
          // console.log("要删除的进程#########2:","删除指定路径",JSON.parse(JSON.stringify(待处理列表)))
          待处理列表 = [...待处理列表, ...待处理列表2];
        }
        //遍历要删除的
        for (let 组件id_ in del_路径_dct){
          if(组件id_==del_id){continue}
          for (let idx in del_路径_dct[组件id_]){
            let 进程id_=del_路径_dct[组件id_][idx];
            res.delete_lst.push(组件id_+'.process_from.'+进程id_);
          }
        }
        let while_true=true;
        let has_process_id={};
        let add_new_prcess={};
        while(while_true){
          while_true=false;
          //遍历要删除process_id的组件    重新获取process_id
          for (let 组件id in del_temp_dct){
            if(!has_process_id[组件id]){
              let new_process=this.del_process_from_get_process_id({
                del_路径_dct:del_路径_dct,
                del_id:del_id,
                组件id:组件id,
                add_new_prcess:add_new_prcess,
                del_line:del_line
              })
              if (new_process){
                while_true=true;
                has_process_id[组件id]=true;
                add_new_prcess[组件id]=JSON.parse(JSON.stringify(new_process[组件id].process_from));
                lhp_deepcopy1(res.postput,new_process);
              }
            }
          }

        }
        return res
      },
    
    get_process_lst_by_process_id:function(temp_id,process_id){
      return this.flow_dict[temp_id].process_from[process_id]
    },
    return_str:function(a){return Object.keys(a).sort().map(k => `${k}__${Object.keys(a[k]).sort((a, b) => a - b).join('_')}`).join('')},

    //建立连线后 建立相应的触发关系  【触发函数:如客户http请求后的回调函数   被动函数:如def a():return 's'可以随时调用的函数，一个是必须等客户请求后才会运行，一个是随时可以调用。当被动函数的传参由触发函数构成时，被动函数的类型转为触发函数。          设置这个触发类和被动类是后台解析数据时编排函数运行顺序时需要使用【在函数获取到所有触发函数传递过来的传参后，主动调用被动函数获取剩余的传参】
    set_tree_types:function(out_id,in_id){
      let out_temp=this.flow_dict[out_id];
      let lst=[];
      let res={};
      if (out_temp.tree_type=='1'){
        lst.push(
          {
            out_id:out_id,
            in_id:in_id,
            tree_from:out_temp.tree_from
          }
        )}
        
        while (lst.length>0){
          let pop_item=lst.pop()
          let now_out_id=pop_item.out_id;
          let now_in_id=pop_item.in_id;
          let tree_from=pop_item.tree_from;
          //如果目标已经为1 那么不处理
          if(this.flow_dict[now_in_id].tree_type=='1'){continue}
          else{
            //如果目标已经在新增 那么跳过
            if(res[now_in_id]){continue}
            let new_tree_from=JSON.parse(JSON.stringify(tree_from));
            new_tree_from.push(now_in_id);
            res[now_in_id]={
              tree_type:'1',
              tree_from:new_tree_from
            }
            //遍历目标的所有输出项 添加进待处理队列中
            let out_k=this.flow_dict[now_in_id].out_kwargs;
            if (out_k){
              for (let k in out_k){
                if (out_k[k].out_params){
                  for (let iin_id in out_k[k].out_params){
                    lst.push(
                      {
                        out_id:now_in_id,
                        in_id:iin_id,
                        tree_from:new_tree_from
                      })
                  }
                }
                
              }
            }
          }
           
              
              

        }
        return res
    },
    //删除组件 或者删除连线时 删除相应的触发关系  
    del_tree_types:function(obj){
      let del_id=obj.del_id;
      let del_line=obj.del_line;
      let out_id=obj.out_id;
      let in_id=obj.in_id;
      let out_temp=this.flow_dict[out_id];
      let lst=[];
      let del_dct={};
      let new_dct={};
      let res={
      }
      if(in_id){
        let in_temp=this.flow_dict[in_id];
        //删除的是一个连线 如果输入组件的tree_type来源于out 那么删除
        if(out_temp.tree_from && in_temp.tree_from && ((out_temp.tree_from.join("_")+"_"+in_id) == in_temp.tree_from.join("_"))){
          lst.push({
            out_id:in_id,
            tree_from:in_temp.tree_from
          })
        }
        del_line=[out_id,in_id]
      }else{
        //删除的是一个组件
        if(out_temp.tree_type=='1'){
          lst.push({
            out_id:out_id,
            tree_from:out_temp.tree_from
          })
        }
      }
      
        while (lst.length>0){
          let now_obj=lst.pop();
          if(now_obj.out_id!=del_id){
            res[now_obj.out_id]={
              tree_type:0,
              tree_from:null
            }
            del_dct[now_obj.out_id]=true;
          }
          //遍历输出项 添加入队列
          out_k=this.flow_dict[now_obj.out_id].out_kwargs
          let tree_from_str=now_obj.tree_from.join("_");
          if (out_k){
            for (let k in out_k){
              if (out_k[k].out_params){
                for (let iin_id in out_k[k].out_params){
                  let iin_data=this.flow_dict[iin_id];
                  if(iin_data.tree_type=='1'&& (tree_from_str+'_'+iin_id==iin_data.tree_from.join("_"))){
                    lst.push({
            out_id:iin_id,
            tree_from:iin_data.tree_from
                    })
                  }
                }
              }
              
            }
          }
        }

        //遍历删除的tree_from 重新获取tree_from
        let while_true=true;
        console.log("del_dct",del_dct)
        while(while_true){
          while_true=false;
          for(let now_del_id in del_dct){
            if(res[now_del_id].tree_type=='1'){continue}
            //遍历向此id输入的组件 查找是否有tree_type=1的组件 有的话 重新获取tree_from
            let in_k=this.flow_dict[now_del_id].in_kwargs;
            console.log("eeeeee 33",now_del_id,JSON.parse(JSON.stringify(in_k)))
            for(let i in in_k){
              try{
                check_id=in_k[i].in_params[0];
                console.log("eeeeee 1")
                if (check_id==del_id){continue}//如果来源为del_id则跳过
                console.log("eeeeee 2")
                if(del_line && del_line[0]==check_id && del_line[1]==now_del_id){continue}//如果来源为删除连线则跳过
                console.log("eeeeee 3")
                if(new_dct[check_id]){
                  while_true=true;
                  let new_tree_from=JSON.parse(JSON.stringify(new_dct[check_id]));
                  new_tree_from.push(now_del_id)
                  res[now_del_id]={
                    tree_type:'1',
                    tree_from:new_tree_from
                  }
                  new_dct[now_del_id]=new_tree_from;
                  break
                }
                console.log("eeeeee 4")
                if(this.flow_dict[check_id].tree_type=='1'){
                  if(del_dct[check_id]){continue}
                  while_true=true;
                  let new_tree_from=JSON.parse(JSON.stringify(this.flow_dict[check_id].tree_from));
                  new_tree_from.push(now_del_id)
                  res[now_del_id]={
                    tree_type:'1',
                    tree_from:new_tree_from
                  }
                  new_dct[now_del_id]=new_tree_from;
                  break
                }
                }catch{

                }
              }}}



        return res
    },
    _show_template:function(){

      // console.log('dddd')
      if (this.data.now_template_name){
        this.data.init_scroll();
        // console.log('dddd 2')
      let _html=`<${this.data.now_template_name} :db_indexr="db_indexr" var_name="${this.var_name2}":fullscreen="true" ></${this.data.now_template_name}>`
      //加载模板的名称
        // console.log('dddd 3')
        this.data.dom=this.$el.querySelector('.a_1_0_4_1_1')

        // this.data.dom=this.get_ref("edit");
        console.log("#############获取到的dom:",this.data.dom)
      // this.data.dom=this.$el.querySelector('.lhp_show_vue_template_____1_div_edit')
      this.data.dom.innerHTML=_html
      // console.log('dddd 4')
      new Vue({'el':this.data.dom,data:{true:true,is_edit:true,db_indexr:this.data.db_indexr}})
      // console.log('dddd 5')
      //更新数据
        // console.log('dddd 6')
        // this.data.get_config();
      // console.log('dddd 7')
    }
    },
    show_template:function(){
      ttime2(this.check_type,this._show_template,[],[])}
  }  ,//该属性 会自动生成watch data methods的属性  通过watch实现data

  mounted: function () {  
    
  _this.data.全局鼠标操作对象1=_this.deepcopy_data.全局鼠标操作对象1;
//   _this.data.全局鼠标操作对象1.set_up({
//     key:"拖拽后端组件",
//     key2:"鼠标up时回收dom",
//     func:_this.鼠标up时回收dom,
// });
    //设置缩放比 高度 宽度
    _this.data.更改scale=function(val){
      _this.data.scale=Number(val)/100;
      let left=-Number(_this.data.width.replace("px",""))*(1-_this.data.scale)/2;
      let top=-Number(_this.data.height.replace("px",""))*(1-_this.data.scale)/2;
      _this.data.write_style=`width:${_this.data.width};height:${_this.data.height};scale:${_this.data.scale};left:${left};top:${top};`;
    }
    _this.data.change_scale_info={"name":"缩放比","callback":_this.data.更改scale};
    _this.data.scale_key="2";
    _this.data.更改width=function(val){
      val=val.replace("px","");
      _this.data.width=Number(val)+'px';
      let left=-Number(_this.data.width.replace("px",""))*(1-_this.data.scale)/2;
      let top=-Number(_this.data.height.replace("px",""))*(1-_this.data.scale)/2;
      _this.data.write_style=`width:${_this.data.width};height:${_this.data.height};scale:${_this.data.scale};left:${left};top:${top};`;
      _this.data.change_width_info['hovertext']=_this.data.width;
    _this.data.width_key= _this.data.width_key==="104"?'103':'104';
    }
    
    _this.data.发起更改width请求=function(val){
      val=val.replace("px","");
      //更新数据 
      let update_val={
        "type":"change_data",
        type2:'更改width',
        now_select:_this.now_select,
        width:val,
        "path":"flow_chat_config.dict.1",
        "data_type":"set_list",//类型 修改数据
        "postput":[{
          
          'path':`flow_chat_config.dict.1.dict.${_this.now_select}.base_info`,
          'data':{
            width:val+'px',
          }
        }],
        }
        
        _this.data.全局配置对象.更新(update_val);
  }
  
    _this.data.change_width_info={"name":"宽度","callback":_this.data.发起更改width请求};
    _this.data.width_key="4";
    _this.data.更改height=function(val){
      val=val.replace("px","");
      _this.data.height=Number(val)+'px';
      let left=-Number(_this.data.width.replace("px",""))*(1-_this.data.scale)/2;
      let top=-Number(_this.data.height.replace("px",""))*(1-_this.data.scale)/2;
      _this.data.write_style=`width:${_this.data.width};height:${_this.data.height};scale:${_this.data.scale};left:${left};top:${top};`;
      
      _this.data.change_height_info['hovertext']=_this.data.height;
    _this.data.height_key= _this.data.height_key==="106"?'105':'106';
    }
    _this.data.发起更改height请求=function(val){
        //更新数据 
        let update_val={
          "type":"change_data",
          type2:'更改height',
          now_select:_this.now_select,
          height:val,
          "path":"flow_chat_config.dict.1",
          "data_type":"set_list",//类型 修改数据
          "postput":[{
            
            'path':`flow_chat_config.dict.1.dict.${_this.now_select}.base_info`,
            'data':{
              height:val+'px',
            }
          }],
          }
          
          _this.data.全局配置对象.更新(update_val);
    }
    _this.data.change_height_info={"name":"高度","callback":_this.data.发起更改height请求};
    _this.data.height_key="6";
    //设置当前选择的流程图
    _this.data.set_key= async function(path){
      console.log("当前选择.....",path)
      let path_lst=path.split(".");
      let flow_chat_config=_this.data.全局配置对象.update_obj.data.flow_chat_config.dict[1];
      _this.now_select=path_lst[path_lst.length-1];
      _this.flow_dict=flow_chat_config.dict[_this.now_select].flow_dict;
      _this.base_info=flow_chat_config.dict[_this.now_select].base_info;
      try{
        if (_this.base_info['run_flag']==true){
          _this.flow_type='运行中';
        }else{
          _this.flow_type='未运行';
        }
      }
      catch{
        _this.flow_type='未运行';
      }
      _this.process_dct=flow_chat_config.dict[_this.now_select].base_info.process_dct;
      _this.data.更改height(flow_chat_config.dict[_this.now_select].base_info.height);
      _this.data.更改width(flow_chat_config.dict[_this.now_select].base_info.width);
      console.log("绘制当前流程 start")
      await _this.data.绘制当前流程的数据();
      console.log("绘制当前流程 end")
      //绘制当前流程的界面
      console.log("当前选择now_select:",_this.now_select)
    }
    // //设置鼠标
    // _this.data.move_obj=new a_move_class();
    // //设置当 有组件拖拽进此画布时   画布的绘制函数
    // _this.data.write_move1=function(obj){
      

    // }
    // console.log("测试111-1")
    // _this.data.move_obj.set_move({
    //   'key':'拖拽组件',
    //   'func':_this.data.write_move1
    // })
    console.log("测试111-2")
    //创建新组件  设置当 有组件拖拽进此画布 鼠标释放后  要进行的操作
    _this.data.create_temp=function(obj){
      let event=obj.event;
      let params=obj.params;
      let data=obj.data;
      //获取到 鼠标所在画布的坐标
      // params={x:x,y:y,relative_leftright:relative_leftright,dom:this.$refs.write_dom};
      let temp_x=params.x-params.relative_leftright.left-30;
      let temp_y=params.y-params.relative_leftright.top-30;
      //获取到正在拖拽的组件参数
      let temp_info=JSON.parse(JSON.stringify(data.temp_info));
      if (!(temp_info.in_kwargs)){temp_info.in_kwargs={}}
      if (!(temp_info.tree_type)){temp_info.tree_type=0}
      temp_info.tree_type_from={}//当前组件的tree_type由哪些决定
      if (!(temp_info.tree_type_from)){temp_info.tree_type_from=0}
      try{
        for(let kk in temp_info.in_kwargs){
          temp_info.in_kwargs[kk].in_type1="0"//0表示固定传参 1表示组件传参 2表示配置设参
          temp_info.in_kwargs[kk].v0=temp_info.in_kwargs[kk].default//0表示固定传参 1表示组件传参 2表示配置设参
          temp_info.in_kwargs[kk].v1_=[null,null]//0表示固定传参 1表示组件传参 2表示配置设参
          temp_info.in_kwargs[kk].v2=""
          temp_info.in_kwargs[kk].in_type3='0'//0表示不强行转换类型
        }
      }
      catch{}
        temp_info.in_kwargs['-1']={
          "name": "flag",
          "note": "通过传入值来控制组件的运行顺序 不传值时表示按照默认方式运行",
          "default": "0",
          "type": "str",
          "in_type1": "0",
          "v0": "0",
          "v1_": [
              null,
              null
          ],
          "v2": "",
          "in_type3": "0"
      }
      if(!(temp_info.out_kwargs)){temp_info.out_kwargs={}}
      temp_info.out_kwargs['-1']={
        "name": "flag",
        "note": "通过传入值来控制组件的运行顺序 不传值时表示按照默认方式运行",
        "type": "str",
    }
        let update_params=[
          {//将路径为path的数据 进行 +1操作 并且存入属性add中 提供给data里面携带@add的属性调用
            name:'@add_index',
            path:`flow_chat_config.dict.${this.now_select}.flow_chat_base_info.idx`,//数据路径
            use:'++s'
          },
          
        ] 
        let postput=[
          {
            'path':`flow_chat_config.dict.1.dict.${this.now_select}.flow_dict.@add_index`,
            'data':temp_info
          },
          
          {
            'path':`flow_chat_config.dict.${this.now_select}.flow_chat_base_info`,
            'data':{"idx":"@add_index"}
          },
        ]
        
        temp_info['process_id']=null
        temp_info['process_from']={}
        //如果目标是进程创建类的组件  那么会新建新的进程id 以及进程名称 和可更改进程名的标志
        if (temp_info.temp_type=='process'){
          update_params.push(
            {
              name:'@add_process_id',
              path:`flow_chat_config.dict.${this.now_select}.flow_chat_base_info.process_idx`,
              use:"++s"
            }
          )
          postput.push({
            'path':`flow_chat_config.dict.${this.now_select}.flow_chat_base_info`,
            'data':{'process_idx':'@add_process_id',"process_dct":{"@add_process_id":temp_info.process_name||'未命名的进程名称'}}
          })
          
        temp_info['process_id']='@add_process_id'
        temp_info['process_change']=true
        temp_info['process_from']['@add_process_id']={'@add_index':["@add_index"]}//创建进程的组件的 进程id来源于自身


        }
        lhp_deepcopy1(temp_info,{
          temp_name:temp_info.name,
          x:event.clientX-rect.left-60,
          y:event.clientY-rect.top-60,
          out_idx:0,
          in_idx:0,
          out:{},
          in:{}
      })
        //更新数据
        let update_val={
          "type":"change_data",
          "data_type":"set_list",//类型 修改数据
          type2:"新增连线",
          update_params:update_params,
          "postput":postput,
        }
      _this.data.全局配置对象.更新(update_val);





    }
    // _this.data.move_obj.set_up({
    //   key:"拖拽组件",
    //   func:_this.data.create_temp,
    //   key2:"鼠标up创建组件"
    // })
    _this.data.显示当前绘制的连线=function(event){
      
    let xy2=_this.get_x_y2(event,"write_dom");
    let x2=Number((xy2['x']+event.clientX-30)/_this.data.scale);
    let y2=Number((xy2['y']+event.clientY-30)/_this.data.scale);
      let data=_this.data.全局鼠标操作对象1.get_data({
        key:"绘制当前连线"})
      let xy={x1:0,y1:0,x2:0,y2:0};


      a_1_0_4_1_1_line_add({
        father_dom:_this.$refs.write_dom,
        key:"当前绘制的连线",
        xy:xy
      });
      a_1_0_4_1_1_line_dct['当前绘制的连线'].vue.$el.style["display"]='none';
    }
    _this.data.移动当前绘制的连线=function(event){
    try{a_1_0_4_1_1_line_dct['当前绘制的连线'].vue.$el.style.removeProperty("display");}catch{}
    let xy2=_this.get_x_y2(event,"write_dom");
    
    let scrollX = _this.$refs.scroll.scrollLeft;
    let scrollY = _this.$refs.scroll.scrollTop;
    let x2=Number((xy2['x']+scrollX)/_this.data.scale);
    let y2=Number((xy2['y']+scrollY-10)/_this.data.scale);
      let data=_this.data.全局鼠标操作对象1.get_data({
        key:"绘制当前连线"})
      let xy={x1:data.x1,y1:data.y1,x2:x2,y2:y2};
// console.log("xys",xy)
      a_1_0_4_1_1_line_dct['当前绘制的连线'].vue.data.xy=JSON.stringify(xy);
    }
    _this.data.隐藏当前绘制的连线=function(event){
      a_1_0_4_1_1_line_dct['当前绘制的连线'].vue.$el.style["display"]='none';
      
      _this.data.全局鼠标操作对象1.unset_move({"key":"绘制当前连线",
        key2:"绘制当前连线move",});
    _this.data.全局鼠标操作对象1.unset_up({"key":"绘制当前连线",
        key2:"绘制当前连线up",});
      
        _this.data.全局鼠标操作对象1.set_data({
          key:"绘制当前连线",
          data:{
            write_flag:false
          }
      });
        
    }
    _this.data.移动后端组件up=function(event){
      
    let data=_this.data.全局鼠标操作对象1.get_data({
      key:"移动后端组件"})
      let new_x=data.x+(event.clientX-data.mousex)/_this.data.scale;
      let new_y=data.y+(event.clientY-data.mousey)/_this.data.scale;
      if(new_x<0){new_x=0}
      if(new_y<0){new_y=0}
      if(new_x>Number(_this.data.width.replace("px",""))){new_x=Number(_this.data.width.replace("px",""))-10}
      if(new_y>Number(_this.data.height.replace("px",""))){new_y=Number(_this.data.width.replace("px",""))-10}
      a_1_0_4_1_1_dom_dct[data.key].vue.data.x=new_x;
      a_1_0_4_1_1_dom_dct[data.key].vue.data.y=new_y;
        //更新数据
        let update_val={
          "type":"change_data",
          "type2":"移动组件",
          'key':data.key,
          'now_select':_this.now_select,
          "path":"flow_chat_config.dict.1",
          "data_type":"set_list",//类型 修改数据
          "postput":[
            {
              'path':`flow_chat_config.dict.1.dict.${_this.now_select}.flow_dict.${data.key.split("_")[1]}`,
              'data':{
                'x':new_x,
                'y':new_y
              }
            }],
        }
        _this.data.全局配置对象.更新(update_val);

      _this.data.全局鼠标操作对象1.unset_move({"key":"移动后端组件",
          key2:"移动后端组件move",});
      _this.data.全局鼠标操作对象1.unset_up({"key":"移动后端组件",
          key2:"移动后端组件up",});
      
  }
  //建立连接线 -呼起 输出参数名 和 输入参数名
  _this.data.建立连接线=function(data2){
    let data=_this.data.全局鼠标操作对象1.get_data({key:"绘制当前连线"});
    console.log("data.key",data.key,data2.key)
    let out_id=data.key.split("_")[1];
    let in_id=data2.key.split("_")[1];
    _this.now_out_id=out_id;
    _this.now_in_id=in_id;
    _this.now_in_key=data2.key;
    _this.now_out_key=data.key;
    console.log("_this.flow_dict",_this.flow_dict)
    let start_obj=_this.flow_dict[out_id];
    let end_obj=_this.flow_dict[in_id];
    
    console.log("in_id",in_id);
    console.log("out_id",out_id)
    if(out_id!=in_id){
      let start_out_kwargs={};
      let end_in_kwargs={};
      // console.log("?1")
      let in_kwargs=_this.flow_dict[in_id].in_kwargs;
      let out_kwargs=_this.flow_dict[out_id].out_kwargs;
      // console.log("?2")
      if(!out_kwargs){Vue.prototype.$notify({type: 'error',message: '输出组件没有出参'});return}
      if(!in_kwargs){Vue.prototype.$notify({type: 'error',message: '输入组件没有入参'});return}
      
    // console.log("in_kwargs",in_kwargs)
      for (let key in in_kwargs){
        if (!in_kwargs[key].in_params){end_in_kwargs[key]=in_kwargs[key].name;}
      }

      if(!(Object.keys(end_in_kwargs)).length){Vue.prototype.$notify({type: 'error',message: '输入组件入参不需要传递了'});return}
      for (let key in out_kwargs){
        start_out_kwargs[key]=out_kwargs[key].name;
      }
      // console.log("start_obj.name",start_obj.name)
      select2__({
        "title":`${start_obj.name}->${end_obj.name}`,
      "select1":start_out_kwargs,"select2":end_in_kwargs,
        callback:function(out_params_info){_this.data.生成连接线(out_params_info)}
      })
      
    }else{
      Vue.prototype.$notify({type: 'error',message: '不能传参给自身'});
    }
    _this.data.隐藏当前绘制的连线();
  }
  _this.data.生成连接线=function(out_params_info){
    
    let out_id=_this.now_out_id;
    let in_id=_this.now_in_id;
    
    let key1=out_params_info.key1//出参组件的 出参 id
    let key2=out_params_info.key2//入参组件的 入参 id
    //判断输出组件和输入组件是否已经拥有连线 
    let has_line=_this.check_line(out_id,in_id);
    //如果拥有连线 那么添加参数
    if (has_line.type==true){
      _this.add_line_params(out_id,in_id,has_line,out_params_info)
      return
    }
    //如果没有连线 那么建立连线
    // console.log(start_obj,end_obj)
    //1.更新 入参组件的 入参连线index计数
    //2.更新 入参组件的 入参连线 的数据
    let in_kwargs_data={}
    in_kwargs_data[key2]={"in_params":{}}
    in_kwargs_data[key2].in_type1='1'//0表示固定传参 1表示组件传参 2表示配置设参
    in_kwargs_data[key2].v1_=[out_id,key1]
                    //--------输出的key和value
    in_kwargs_data[key2]['in_params']=[out_id,key1,["@out_idx","@in_idx"]]
    //4.更新 出参组件的 出参连线index计数
    //5.更新 出参组件的 出参连线 的数据
    let out_kwargs_data={}
    out_kwargs_data[key1]={"out_params":{}}
                    //--------输出的key和value
    out_kwargs_data[key1]['out_params'][in_id]={}
    out_kwargs_data[key1]['out_params'][in_id][key2]={"key":["@out_idx","@in_idx"]}
    let postput={
      'path':`flow_chat_config.dict.1.dict.${_this.now_select}.flow_dict`,
      'data':{}
    }
    
    postput.data[out_id]={}
    lhp_deepcopy1(postput.data[out_id],{"out":{"@out_idx":{
                                                      "out_id":in_id,
                                                      "out_key":"@in_idx",}}})
    lhp_deepcopy1(postput.data[out_id],{"out_kwargs":out_kwargs_data})
    lhp_deepcopy1(postput.data[out_id],{"out_idx":"@out_idx"})
    postput.data[in_id]={}
    lhp_deepcopy1(postput.data[in_id],{"in":{
                                                                "@in_idx":{
                                                                  "in_id":out_id,
                                                                  "in_key":"@out_idx",
                                                                }
                                                            }})
    lhp_deepcopy1(postput.data[in_id],{"in_kwargs":in_kwargs_data})
    lhp_deepcopy1(postput.data[in_id],{"in_idx":"@in_idx"})
    //给进程上下绑定进程id
    console.log("给进程上下绑定进程id")
    let process_data=_this.set_process_from(out_id,in_id)
    lhp_deepcopy1(postput.data,process_data);
    //绑定tree_type
    console.log("给组件绑定tree_type")
    let tree_type_res=_this.set_tree_types(out_id,in_id)
    if(Object.keys(tree_type_res).length>0){
      lhp_deepcopy1(postput.data,tree_type_res)
    }
    console.log("开始处理 end")
//更新数据 
let update_val={
"type":"change_data",
type2:'新增连线',
out_id:out_id,
in_id:in_id,
out_key:_this.now_out_key,
in_key:_this.now_in_key,
"path":"flow_chat_config.dict.1",
"data_type":"set_list",//类型 修改数据
update_params:[
  {//将路径为path的数据 进行 +1操作 并且存入属性add中 提供给data里面携带@add的属性调用
    name:'@out_idx',
    path:`flow_chat_config.dict.1.dict.${_this.now_select}.flow_dict.${out_id}.out_idx`,//数据路径
    use:'++s'
  },
  {//将路径为path的数据 进行 +1操作 并且存入属性add中 提供给data里面携带@add的属性调用
    name:'@in_idx',
    path:`flow_chat_config.dict.1.dict.${_this.now_select}.flow_dict.${in_id}.in_idx`,//数据路径
    use:'++s'
  }, 
],
"postput":[postput],
}

_this.data.全局配置对象.更新(update_val);
}
_this.data.select_temp={};
_this.data.select_line={};
_this.data.clear_select=function(){
  console.log("开始清除 start")
  for (let k in _this.data.select_temp){
    try{a_1_0_4_1_1_dom_dct[k].vue.data.out_flag=false;}catch{}
    try{
      a_1_0_4_1_1_dom_dct[k].vue.data.in_flag=false;}catch{}
  }
  for (let k in _this.data.select_line){
    try{
      a_1_0_4_1_1_line_dct[k].vue.data.line_flag=false;}catch{}

  }
  _this.data.select_temp={};
  _this.data.select_line={};
  console.log("开始清除 end")
}
_this.data.start_select=function(key){
  console.log("开始选择 start")
  if(key.includes("=>")){
    console.log("key:",key,a_1_0_4_1_1_line_dct)
    let temp_lst=key.split("=>");
    _this.data.select_temp[temp_lst[0]]='out';
    a_1_0_4_1_1_dom_dct[temp_lst[0]].vue.data.out_flag=true;
    _this.data.select_temp[temp_lst[1]]='in';
    a_1_0_4_1_1_dom_dct[temp_lst[1]].vue.data.in_flag=true;
    _this.data.select_line[key]=true;
    a_1_0_4_1_1_line_dct[key].vue.data.line_flag=true;
  }else{
    _this.data.select_temp[key]='out';
    a_1_0_4_1_1_dom_dct[key].vue.data.out_flag=true;

  }
  console.log("开始选择 end")
}
_this.data.选择组件=function(key){
console.log("选择组件",key);
//消除之前的选择事情
_this.data.clear_select();
//添加当前的选择事件
_this.data.start_select(key);

window['浮动窗口当前显示'].set("后端组件属性窗口");
window['后端组件属性窗口'].now_select=_this.now_select;
window['后端组件属性窗口'].key=key;
}
_this.data.选择连线=function(key){
console.log("选择连线",key);
//消除之前的选择事件

_this.data.clear_select();
//添加当前的选择事件
_this.data.start_select(key);
//显示浮动窗口
window['浮动窗口当前显示'].set("后端连线属性窗口");
window['后端连线属性窗口'].now_select=_this.now_select;
window['后端连线属性窗口'].key=key;
}


  _this.data.修改组件名称=function(key,name){
    console.log("修改组件名称",key,name)
    let out_id=key.split("_")[1];//this.now_select_temp
    
    let update_val={
      "type":"change_data",
      "type2":"修改组件名称",
      'key':key,
      name:name,
      'now_select':_this.now_select,
      "path":"flow_chat_config.dict.1",
      "data_type":"set_list",//类型 修改数据
      "postput":[{
        'path':`flow_chat_config.dict.1.dict.${_this.now_select}.flow_dict.${out_id}`,
        'data':{'name':name}
      }]
    }
    _this.data.全局配置对象.更新(update_val);
  }
  _this.data.删除连线=function(key){
    let key_lst=key.split("=>");
    let out_id=key_lst[0].split("_")[1];
    let in_id=key_lst[1].split("_")[1];
    let out_key=null;in_key=null;
    //遍历out项 
    let out=_this.flow_dict[out_id].out;
    for(let idx in out){
      if (out[idx].out_id==in_id){
        out_key=idx;
        break;
      }
    }
    let in_=_this.flow_dict[in_id].in;
    for(let idx in in_){
      if (in_[idx].in_id==out_id){
       in_key=idx;
        break;
      }
    }

    let delete1={
      'delete_before':`flow_chat_config.dict.1.dict.${_this.now_select}.flow_dict`,
      'lst':[`${out_id}.out.${out_key}`,
        `${in_id}.in.${in_key}`

      ]
    }
    let delete_lst=[delete1]
    let postput={}
    let in_kwargs=_this.flow_dict[in_id].in_kwargs
    let out_kwargs=_this.flow_dict[out_id].out_kwargs
    //遍历in_id的key
    console.log("in_id的key",in_kwargs)
    for(let kk in in_kwargs){
      if (in_kwargs[kk].in_params&& in_kwargs[kk].in_params[0]==out_id){
        delete1.lst.push(
          `${in_id}.in_kwargs.${kk}.in_params`
        )
      }
    }
    //遍历out_id的key
    for(let kk in out_kwargs){
      if (out_kwargs[kk].out_params && out_kwargs[kk].out_params.hasOwnProperty(in_id)){
        delete1.lst.push(`${out_id}.out_kwargs.${kk}.out_params.${in_id}`
        )
      }
    }
    //更新数据
let update_val={
"type":"change_data",
"data_type":"set_list",//类型 修改数据
"type2":"删除连线",
"path":"flow_chat_config.dict.1",
key:key,
"delete2":delete_lst
}


      //删除进程id
      let process_dct=_this.del_process_from({
       in_id:in_id,
        out_id:out_id
      })
      console.log("删除连线关于删除的进程数据:",JSON.parse(JSON.stringify(process_dct)));
      if(process_dct.delete_lst.length){
        for (let iii=0;iii<process_dct.delete_lst.length;iii++){
          delete1.lst.unshift(process_dct.delete_lst[iii])
        }

      }
      if (Object.keys(process_dct.postput).length){
        lhp_deepcopy1(postput,process_dct.postput)
      }

  //解除tree_type绑定
      let tree_type_res=_this.del_tree_types({
        out_id:out_id,
        in_id:in_id
      })
      lhp_deepcopy1(postput,tree_type_res);
if (Object.keys(postput).length){
update_val.postput=[{path:`flow_chat_config.dict.1.dict.${_this.now_select}.flow_dict`,data:postput}]
}
console.log("del line postput",update_val.postput,postput)
_this.data.全局配置对象.更新(update_val);
  }
  _this.data.删除组件=function(key){
    let out_id=key.split("_")[1];//this.now_select_temp
      let value=_this.flow_dict[out_id];
      let delete1={
        'delete_before':`flow_chat_config.dict.1.dict.${_this.now_select}.flow_dict`,
        'lst':[
        ]
      }
      let delete_lst=[delete1]
      let postput={}
      //将绑定在这个组件上的连线全部删除
      //先删除输出连线
      console.log("删除组件-1")
      for (let out_key in value.out) {  
        delete1.lst.push(`${value.out[out_key].out_id}.in.${value.out[out_key].out_key}`
        ) 

        let ooout_id=value.out[out_key].out_id;
        let out_obj=_this.flow_dict[ooout_id].in_kwargs;
        for (let param_key in out_obj){
          if (out_obj[param_key].hasOwnProperty("in_params")&&out_obj[param_key]['in_params'][0]==out_id){
            delete1.lst.push(`${ooout_id}.in_kwargs.${param_key}.in_params`
            )
          }
        }
      }  

      console.log("删除组件-2")
      //再删除输入连线
      for (let in_key in value.in) {  
        delete1.lst.push(
         `${value.in[in_key].in_id}.out.${value.in[in_key].in_key}`
        ) 
        let iiin_id=value.in[in_key].in_id;
        let in_obj=_this.flow_dict[iiin_id].out_kwargs;
        for (let param_key in in_obj){
          if (in_obj[param_key].hasOwnProperty("out_params")&&in_obj[param_key]['out_params'].hasOwnProperty(out_id)){
            delete1.lst.push(
             `${iiin_id}.out_kwargs.${param_key}.out_params.${out_id}`
            )
          }
        }
      }  
      let update_val={
        "type":"change_data",
        "type2":"删除组件",
        'key':key,
        'now_select':_this.now_select,
        "path":"flow_chat_config.dict.1",
        "data_type":"set_list",//类型 修改数据
        "delete2":delete_lst
      }
      //删除组件
      delete1.lst.push(`${out_id}`)
      //删除进程id
      let process_dct=_this.del_process_from({
        del_id:out_id,
        out_id:out_id
      })
      console.log("要删除的进程:",JSON.parse(JSON.stringify(process_dct)));
      if(process_dct.delete_lst.length){
        for (let iii=0;iii<process_dct.delete_lst.length;iii++){
          delete1.lst.unshift(process_dct.delete_lst[iii])
        }

      }
      if (Object.keys(process_dct.postput).length){
        lhp_deepcopy1(postput,process_dct.postput)
      }
      console.log("删除组件-3")
    //解除tree_type绑定
    let treepostput=null
      //绑定tree_type
      let tree_type_res=_this.del_tree_types({
        del_id:out_id,
        out_id:out_id
      })
      lhp_deepcopy1(postput,tree_type_res);
      // if(tree_type_res!=null ){
      //   if ( Object.keys(tree_type_res.del_lst).length>0){
          
      //     for (let i=0;i< tree_type_res.del_lst.length;i++){
      //       delete1.lst.push(tree_type_res.del_lst[i].path)
      //   }
      //   }
        
      //   if (tree_type_res.postput){
      //     treepostput=tree_type_res.postput
      //   }
      // }
      
      console.log("删除组件-4")
      if(Object.keys(postput).length){
        update_val.postput=[{path:`flow_chat_config.dict.1.dict.${_this.now_select}.flow_dict`,data:{}}]
        lhp_deepcopy1(update_val.postput[0].data,postput)
      }
      if(treepostput){
        if(!update_val.postput){update_val.postput=[{path:`flow_chat_config.dict.1.dict.${_this.now_select}.flow_dict`,data:{}}]}
        lhp_deepcopy1(update_val.postput[0].data,treepostput)
      }
      console.log("删除组件-5")
    _this.data.全局配置对象.更新(update_val);
    
  }
  _this.data.移动后端组件move=function(event){
    let data=_this.data.全局鼠标操作对象1.get_data({
      key:"移动后端组件"})
      let new_x=data.x+(event.clientX-data.mousex)/_this.data.scale;
      let new_y=data.y+(event.clientY-data.mousey)/_this.data.scale;
      if(new_x<0){new_x=0}
      if(new_y<0){new_y=0}
      if(new_x>Number(_this.data.width.replace("px",""))){new_x=Number(_this.data.width.replace("px",""))-10}
      if(new_y>Number(_this.data.height.replace("px",""))){new_y=Number(_this.data.width.replace("px",""))-10}
      a_1_0_4_1_1_dom_dct[data.key].vue.data.x=new_x;
      a_1_0_4_1_1_dom_dct[data.key].vue.data.y=new_y;
      _this.data.更新目标连线(data.key);
  }
  _this.sleep=function sleep(ms) {  
    return new Promise(resolve => setTimeout(resolve, ms));  
}  

_this.data._init_dct={};
_this.data.get_out_xy_in_xy=function(flow_id){
  if(!_this.data._init_dct[flow_id]){
    let flow_id2=flow_id.split("_")[1];
    console.log("_this.flow_dict[flow_id].name",_this.flow_dict,flow_id,flow_id2)
    let obj=a_1_0_4_1_1_get_wh({
      'context':_this.flow_dict[flow_id2].name,
      'class':"a_1_0_4_1_1_class1 ddd"
    });
    let width=obj.width;
    let circle_style_left=width/2-6;
    let x=_this.flow_dict[flow_id2].x;
    let y=_this.flow_dict[flow_id2].y;
    _this.data._init_dct[flow_id]= {
      in_xy:{x:x+circle_style_left,y:y-12},
      out_xy:{x:x+circle_style_left,y:y+24}
    }
  }
  return _this.data._init_dct[flow_id]
}
    _this.data.绘制当前流程的数据=async function(){
        //清空内容
        _this.$refs.write_dom.innerHTML = '';
        a_1_0_4_1_1_clear();
        a_1_0_4_1_1_line_clear();
        _this.data._init_dct={};
        //遍历当前流程 将要添加内容存入列表
        let add_lst=[];
        let flow_keys=Object.keys(_this.flow_dict);
        for (let i=0;i<flow_keys.length;i++){
          let flow_id=flow_keys[i];
          let flow_data=_this.flow_dict[flow_id];
          let deepcopy_data=JSON.parse(JSON.stringify(flow_data));
          let key=`${_this.now_select}_${flow_id}`;
          deepcopy_data.key=key;
          deepcopy_data.father_data=_this.data;
          deepcopy_data.father=_this;
          deepcopy_data.id_=flow_id;
          //添加组件
          add_lst.push({
            data:{
              'key':key,
              'deepcopy_data':deepcopy_data,
              "vue_name":"a_1_0_4_1_1_buttonx",
              "father_dom":_this.$refs.write_dom,
            },
            "func":a_1_0_4_1_1_add,
          })

          try{
//遍历输出参数
let out_key=key;
let out=Object.keys(flow_data['out']);

for(let j=0;j<out.length;j++){
  let in_key=`${_this.now_select}_${flow_data['out'][out[j]].out_id}`;
  let out_xy=_this.data.get_out_xy_in_xy(out_key).out_xy;
  let in_xy=_this.data.get_out_xy_in_xy(in_key).in_xy;
  //添加连线
  add_lst.push({
  data:{
    'key':out_key+'=>'+in_key,
    "father_data":_this.data,
    "xy":{x1:out_xy.x,y1:out_xy.y,x2:in_xy.x,y2:in_xy.y},
    "father_dom":_this.$refs.write_dom,
  },
  "func":a_1_0_4_1_1_line_add,
})
}
          }catch(err){console.log("err"+err)
}
          

        }
        //停顿时间加载组件
        let count_max=50;count_start=0;
        while (add_lst.length){
            //等待页面刷新完成
            if ((count_start++)%count_max==0){
                await _this.sleep(20);
            }
            let t_obj=add_lst.pop();
            t_obj.func(t_obj.data);
        }
        a_1_0_4_1_1_refresh_all();
    }

    _this.data.协同数据处理=function(obj){
      console.log("后端流程可视化编辑界面 接收协同数据处理:",obj)
      if(obj.type2=='新增组件'){
        //创建组件
        let deepcopy_data=obj.postput[0].data;
        let path_lst=obj.postput[0].path.split(".");
        let key=path_lst[4]+'_'+path_lst[6];
        deepcopy_data.key=key;
        deepcopy_data.father_data=_this.data;
        deepcopy_data.father=_this;
        deepcopy_data.id_=path_lst[6];
        // console.log("_____this",_this.data.data,_this.now_select)
        // deepcopy_data.process_dct=_this.data.data.dict[_this.now_select].base_info.process_dct;
        a_1_0_4_1_1_add({
          key:key,
          father_dom:_this.$refs.write_dom,
          vue_name:"a_1_0_4_1_1_buttonx",
          deepcopy_data:deepcopy_data
        });
        
      // let flow_chat_config=_this.data.全局配置对象.update_obj.data.
      // flow_chat_config.dict.1.dict.${_this.now_select}.flow_dict;
      //   全局配置对象.注册(
      //     obj_data={
      //       _this:a_1_0_4_1_1_dom_dct[key].vue,//vue对象
      //       other_callback:{},//其他监听回调
      //       path:'flow_chat_config',//注册路径 /将此数据绑定到组件上
      //       type:"try3", // 报错不删除此注册[运行 func报错时不直接删除该注册对象]
      //       vname:"",// 将接收的的完整数据保存到   vue对象.data[vname]
      //       func:function(ee){//将接收的的完整数据保存到   vue对象.data[vname]后 要执行的函数
      //       }
      //     })
        // console.log("_this.",_this)
      }else if(obj.type2=="移动组件"){
        if(obj.now_select==_this.now_select){
          a_1_0_4_1_1_dom_dct[obj.key].vue.data.x=obj.postput[0].data['x'];
          a_1_0_4_1_1_dom_dct[obj.key].vue.data.y=obj.postput[0].data['y'];
          
          _this.data.更新目标连线(obj.key);
        }

      }else if(obj.type2=='删除组件'){
        _this.data.删除目标连线(obj.key);
        a_1_0_4_1_1_del(obj.key);
        a_1_0_4_1_1_refresh_all();
      }else if(obj.type2=='新增连线'){
        let out_key=obj.out_key;
        let in_key=obj.in_key;
        console.log("开始创建连线！",out_key,in_key,a_1_0_4_1_1_dom_dct)
        let out_xy=window.a_1_0_4_1_1_dom_dct[out_key].vue.return_circle_xy2();
        let in_xy=window.a_1_0_4_1_1_dom_dct[in_key].vue.return_circle_xy1();
        console.log("out_xy,in_xy",out_xy,in_xy)
          a_1_0_4_1_1_line_add(
              {
                key:out_key+'=>'+in_key,
                father_data:_this.data,
                xy:{x1:out_xy.x,y1:out_xy.y,x2:in_xy.x,y2:in_xy.y},
                father_dom:_this.$refs.write_dom
              }
          )
          a_1_0_4_1_1_refresh_all();
      }else if(obj.type2=='修改组件名称'){
        window.a_1_0_4_1_1_dom_dct[obj.key].vue.refresh_func();
        _this.data.更新目标连线(obj.key);
      }else if(obj.type2=='更改width'){
        if(_this.now_select==obj.now_select){
          _this.data.更改width(obj.width.replace("px",""));
        }
      }else if(obj.type2=='更改height'){
        if(_this.now_select==obj.now_select){
          _this.data.更改height(obj.height.replace("px",""));
        }
      }else if(obj.type2=='删除连线'){
        console.log("删除目标连线！")
        _this.data.删除目标连线(obj.key);
        a_1_0_4_1_1_refresh_all();
      }else if(obj.type2=="启停流程"){
        if (obj.flow_id==_this.now_select){
          if(obj.flow_type==true){
            _this.flow_type="运行";
            _this.flow_type_key= _this.flow_type_key=="ff2"?"ff1":"ff2";
          }else{
            _this.flow_type="未运行";
            _this.flow_type_key= _this.flow_type_key=="ff2"?"ff1":"ff2";
          }
      // flow_type_key:"ff1",
      // flow_type:'未运行',
        }
      }
    }
    _this.data.更新目标连线=function(key){
      // console.log("更新.")
      //获取当前流程id  和  组件id
      let temp_v=key.split("_");
      let flow_id=temp_v[0];
      let temp_id=temp_v[1];
      if (flow_id!==_this.now_select){return}//如果不是当前流程图 那么取消
      //获取目标入参位置
      let in_xy=window.a_1_0_4_1_1_dom_dct[key].vue.return_circle_xy2();
      let in_x=in_xy.x,in_y=in_xy.y;
      //获取目标出参位置
      let out_xy=window.a_1_0_4_1_1_dom_dct[key].vue.return_circle_xy1();
      let out_x=out_xy.x,out_y=out_xy.y;
      //获取目标 所有输出到入参的 id
      let in_dcts=_this.flow_dict[temp_id].in;
      let out_dcts=_this.flow_dict[temp_id].out;
      let out_lst=[];
      let in_lst=[];
      for (let k in in_dcts){
        let idx=flow_id+'_'+in_dcts[k].in_id;
        out_lst.push([idx,window.a_1_0_4_1_1_dom_dct[idx].vue.return_circle_xy2()]);
      }
      for (let k in out_dcts){
        let idx=flow_id+'_'+out_dcts[k].out_id;
        in_lst.push([idx,window.a_1_0_4_1_1_dom_dct[idx].vue.return_circle_xy1()]);
      }
      for(let i=0;i<in_lst.length;i++){
        window.a_1_0_4_1_1_line_dct[key+'=>'+in_lst[i][0]].vue.data.xy=JSON.stringify({x2:in_lst[i][1].x,y2:in_lst[i][1].y,x1:in_x,y1:in_y})
      }
      for(let i=0;i<out_lst.length;i++){
        // console.log("key+'=>'+out_lst[i][0]]",key+'=>'+out_lst[i][0])
        window.a_1_0_4_1_1_line_dct[out_lst[i][0]+'=>'+key].vue.data.xy=JSON.stringify({x1:out_lst[i][1].x,y1:out_lst[i][1].y,x2:out_x,y2:out_y})
      }
    }
    _this.data.删除目标连线=function(key){
      for(k in window.a_1_0_4_1_1_line_dct){
        if(k.includes(key)){
          window.a_1_0_4_1_1_line_del(k)
        }
      }
    }
    //上传更改数据
    //新增组件
    _this.data.新增组件=function(event,info){
      
    let xy=_this.get_x_y2(event,"write_dom")
    console.log("拖拽进来的组件数据:",info)
      //   // console.log("mouseup2")
      //   // let new_key=Object.keys(this.info_dct).reduce((max, current) => Math.max(max, current), -Infinity)+1;
      //   // console.log("mouseup3",new_key)
      //   let rect = this.$refs.scroll.getBoundingClientRect();  
      let temp_info=JSON.parse(JSON.stringify(info));
      if (!(temp_info.in_kwargs)){temp_info.in_kwargs={}}
      if (!(temp_info.out_kwargs)){temp_info.out_kwargs={}}
        if (!(temp_info.tree_type)){temp_info.tree_type=0}
        temp_info.tree_type_from={}//当前组件的tree_type由哪些决定
        if (temp_info.tree_type==0){
          temp_info.tree_from=null;
        }else{
          temp_info.tree_from=['@add_index'];
        }
        // if (!(temp_info.tree_type_from)){temp_info.tree_type_from=0}

        try{
          for(let kk in temp_info.in_kwargs){
            if(!temp_info.in_kwargs[kk].in_type1){temp_info.in_kwargs[kk].in_type1="0";}//0表示固定传参 1表示组件传参 2表示配置设参
            if(!temp_info.in_kwargs[kk].v0){temp_info.in_kwargs[kk].v0=temp_info.in_kwargs[kk].default;}//0表示固定传参 1表示组件传参 2表示配置设参
            if(!temp_info.in_kwargs[kk].v1_){ temp_info.in_kwargs[kk].v1_=[null,null];}//0表示固定传参 1表示组件传参 2表示配置设参
            if(!temp_info.in_kwargs[kk].v2){temp_info.in_kwargs[kk].v2="";}//0表示固定传参 1表示组件传参 2表示配置设参
            if(!temp_info.in_kwargs[kk].in_type3){temp_info.in_kwargs[kk].in_type3='0'}///0表示不强行转换类型
            
          }
        }
        catch{}
        temp_info.in_kwargs['-1']={
          "name": "flag",
          "note": "通过传入值来控制组件的运行顺序 不传值时表示按照默认方式运行",
          "default": "0",
          "type": "str",
          "in_type1": "0",
          "v0": "0",
          "v1_": [
              null,
              null
          ],
          "v2": "",
          "in_type3": "0"
      }
      if (!temp_info.no_out_kwargs){
        temp_info.out_kwargs['-1']={
          "name": "flag",
          "note": "将传入的flag值输出",
          "default": "0",
          "type": "str",
      }

      }
        let update_params=[
          {//将路径为path的数据 进行 +1操作 并且存入属性add中 提供给data里面携带@add的属性调用
            name:'@add_index',
            path:`flow_chat_config.dict.1.dict.${_this.now_select}.base_info.index`,//数据路径
            use:'++s'
          },
          
        ] 
        let postput=[
          {
            'path':`flow_chat_config.dict.1.dict.${_this.now_select}.flow_dict.@add_index`,
            'data':temp_info
          },
          
          {
            'path':`flow_chat_config.dict.1.dict.${_this.now_select}.base_info`,
            'data':{"index":"@add_index"}
          },
        ]
        
        temp_info['process_id']=null
        temp_info['process_from']={}
        //如果目标是进程创建类的组件  那么会新建新的进程id 以及进程名称 和可更改进程名的标志
        if (temp_info.temp_type=='process'){
          update_params.push(
            {
              name:'@add_process_id',
              path:`flow_chat_config.dict.1.dict.${_this.now_select}.base_info.process_idx`,
              use:"++s"
            }
          )
          postput.push({
            'path':`flow_chat_config.dict.1.dict.${_this.now_select}.base_info`,
            'data':{'process_idx':'@add_process_id',"process_dct":{"@add_process_id":temp_info.process_name||'未命名的进程名称'}}
          })
          
        temp_info['process_id']='@add_process_id';
        temp_info['process_change']=true;
        temp_info['process_from']['@add_process_id']=["@add_index"];//创建进程的组件的 进程id来源于自身


        }
        // 获取滚动偏移量

        let scrollX = _this.$refs.scroll.scrollLeft;
        let scrollY = _this.$refs.scroll.scrollTop;
        console.log("获取到的滚动偏移量",scrollX,scrollY)
        lhp_deepcopy1(temp_info,{
          temp_name:temp_info.name,
          x:Number((xy['x']+scrollX-30)/_this.data.scale),
          y:Number((xy['y']+scrollY-30)/_this.data.scale),
          out_idx:0,
          in_idx:0,
          out:{},
          in:{}
      })
        //更新数据
        let update_val={
          "type":"change_data",
          "type2":"新增组件",
          "path":"flow_chat_config.dict.1",
          "data_type":"set_list",//类型 修改数据
          update_params:update_params,
          "postput":postput,
        }
        _this.data.全局配置对象.更新(update_val);
    }
    //添加新的组件
    // _this.data.add();
    //添加新的连接
    
    //清空所有内容

    //按照选择的










    this.project_post=request______({method:'post',url:'/run_flow',error_run_func:function(data){if (data.error_code==1){window.location.href = '/login';}}})
    this.url_params=get_url_params()

      if (_this.show_flag){_this.data.show_flag=_this.show_flag}
      // console.log('test',_this.$el)
      _this.data.set_template=function(template_name){
        console.log("数据库html可视化 设置template_name",template_name);
        _this.data.now_template_name=template_name
        _this.show_template()
      }
    _this.data.change_db_indexr=function(db_indexr){
      console.log("数据库html可视化 设置dbindexr",db_indexr);
      _this.data.db_indexr=db_indexr}
    
    _this.data.init_scroll=function(){

      var scrollableElement = _this.get_ref("scroll");
  window.scrollableElement=scrollableElement;
      // 确保元素有滚动条  
      if (scrollableElement.scrollHeight > scrollableElement.clientHeight) {  
      // 设置滚动位置  
        scrollableElement.scrollTop =(scrollableElement.scrollHeight - scrollableElement.clientHeight) / 2;
      }
      if(scrollableElement.scrollWidth>scrollableElement.clientWidth){
        scrollableElement.scrollLeft = (scrollableElement.scrollWidth-scrollableElement.clientWidth)/2; 
      }
    }
    
  document.addEventListener('click', this.handleGlobalClick);
    //初始化滚动轴
    ttime3(_this,'scroll',_this.data.init_scroll);
  },
  beforeDestroy() {
    // 确保在组件销毁前移除监听器
    document.removeEventListener('click', this.handleGlobalClick);
  },
} 
  );
  
